slider + logo no centro + responsive

marcelocardoso · Julho 14, 2016

pessoal.

no código abaixo, tenho um slider tipico do bootstrap, funcionando.
tenho caption também que exibe texto ao centro.

to tentando adicionar acima ao CENTRO do caption com LOGO, mas não estou conseguindo deixar ele no mesmo lugar que quando aberto em tela toda, fullscreen, porém, ao redimensionar, o logo se perde e também os textos do caption, sobem....

Gostaria que ele, logo redimensionasse junto ao texto e slider..
Já tentei de varias maneiras, mas o logo e o caption não se comportam bem.

Segue código:

    <!--LOGOMARCA DA EMPRESA -->
    <section class="text-center hidden-lg hidden-xs hidden-md hidden-sm">
        <div class="container-fluid">
            <a href="index.html"><img src="config/images/logo_grande.png" class="img-responsive" style="margin: auto; position: fixed; top: 0;"></a>
        </div>
    </section>
    <!--LOGOMARCA DA EMPRESA -->



    <!--SLIDER CENTRAL -->
    <div id="mySlider" class="carousel slide" data-ride="carousel" data-interval="3000" style="background-color: #0069AB;">
        <ol class="carousel-indicators">
            <li data-target="#mySlider" data-slide-to="0" class="active"></li>
            <li data-target="#mySlider" data-slide-to="1" class=""></li>
            <li data-target="#mySlider" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="config/images/slide1.jpg" class="img-responsive" style="margin: auto;">
                <div class="mbr-overlay" style="opacity: 0.7; background-color: #0069AB;"></div>
                <div class="carousel-caption">
                    <div class="mbr-hero">
                        <h1 class="mbr-hero__text">Painel do Prisma 01</h1>
                        <p class="mbr-hero__subtext">Pequena descrição da tela do painel do prisma, expondo informações básicas para ciência do usuário final.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="config/images/slide2.jpg" class="img-responsive" style="margin: auto;">
                <div class="mbr-overlay" style="opacity: 0.7; background-color: #0069AB;"></div>
                <div class="carousel-caption">
                    <div class="mbr-hero">
                        <h1 class="mbr-hero__text">Painel do Prisma 02</h1>
                        <p class="mbr-hero__subtext">Pequena descrição da tela do painel do prisma, expondo informações básicas para ciência do usuário final.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="config/images/slide3.jpg" class="img-responsive" style="margin: auto;">
                <div class="mbr-overlay" style="opacity: 0.7; background-color: #0069AB;"></div>
                <div class="carousel-caption">
                    <div class="mbr-hero">
                        <h1 class="mbr-hero__text">Painel do Prisma 03</h1>
                        <p class="mbr-hero__subtext">Pequena descrição da tela do painel do prisma, expondo informações básicas para ciência do usuário final.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--SLIDER CENTRAL -->

L. Henrique · Julho 14, 2016

Marcelo,

Sem o CSS fica complicado ver o que você já tentou. Veja se esse tópico te ajuda: http://stackoverflow.com/questions/27279865/how-to-properly-position-a-bootstrap-carousel-caption

Abraços!

marcelocardoso · Julho 14, 2016

henrique:

até consegui fazer oq quero agora, utilizando os css do mobirise.
mas tem um porém, o logo centralizei com estes códigos acima, mas agora preciso alterar algo no CSS tipo VISIBILITY = HIDDEN para quando rolar a página, ele suma da TELA.

CODIGO:

   <style>     
        .brand-centered {
            display: flex;
            justify-content: center;
            position: absolute;
            width: 100%;
            left: 0;
            top: 110;
        }
        
        .mbr-brand__logo {
            display: flex;
            align-items: center;
        }
        
        .mbr-brand__logo {
            padding: 0px;
        }
        
        .mbr-brand__logo > img {
            height: 100%;
            width: auto;
            padding: 7px 14px 7px 0;
        }
    </style>
    

    <!--TOPO NAVEGADOR -->
    <section class="mbr-navbar--sticky mbr-navbar--transparent">
        <div class="mbr-navbar__section mbr-section">
            <div class="mbr-section__container container">
                <div class="brand-centered">
                    <span class="mbr-navbar__brand-link mbr-brand--inline">
                        <span class="mbr-brand__logo">
                            <img class="mbr-navbar__brand-img mbr-brand__img" src="config/images/logo_grande.png" style="margin: 0; float: none; text-align: center;">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </section>
    <!--TOPO NAVEGADOR -->

No caso teria que adicionar algo no CSS, acredito q no bootstrap.css do mobirise, algo que sumisse o logo ao baixar e rolar a página, veja se consegue testar... ok

te agradeço até aqui, no centro da tela já consegui, mas não consigo esconder ele, ok - o logo.

Obrigado.

L. Henrique · Julho 14, 2016

Marcelo,

Pra fazer algo sumir rolando a página, só utilizando JS com evento scroll. Você calcula a altura da página com a propriedade height(); e depois usa o scrollTop(); e define uma condição para adição de uma propriedade CSS (opacity, por exemplo).

Se precisar de ajuda quanto ao código (não a receber ele pronto), posso ajudar.

Abraços!

marcelocardoso · Julho 14, 2016

acredito q nem seja td isso, colega...
apenas habilitar, setar no BOOTSTRAP.CSS onde tem as classes mbr-brand__logo

algo como VISIBILITY = HIDDEN, ou seja, sumir o objeto quando o NAV acima subir a BARRA e diminuir o logotipo.

Só não sei como fazer dentro do arquivo do bootstrap.css
teria que mudar algo nas classes do logo.

nestas classes do bootstrap:

.mbr-brand {
  display: block;
  float: left;
  position: relative;
}
.mbr-brand,
.mbr-brand:hover {
  text-decoration: none;
}
.mbr-brand__name {
  display: block;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
}
.mbr-brand__name,
.mbr-brand__name:hover {
  text-decoration: none;
}
.mbr-brand--inline {
  display: table;
}
.mbr-brand--inline:after {
  content: "";
  display: table-cell;
  width: 1px;
}
.mbr-brand--inline .mbr-brand__logo,
.mbr-brand--inline .mbr-brand__name {
  display: table-cell;
  vertical-align: middle;
    
}
.mbr-brand--inline .mbr-brand__logo {
  padding-right: 10px;
    
}
.mbr-brand--inline .mbr-brand__name {
  margin: 0;
  text-align: left;
}
.mbr-form {
  display: table;
  margin-top: -13px;
  position: relative;
  top: 14px;
  width: 100%;
}

marcelocardoso · Julho 15, 2016

Estou usando este exemplo como base, preciso somente ao DESCER a página, esconder o logotipo quando ele vai para a barra preta ACIMA.

tenho que acertar no CSS, mas já tentei de varias maneiras.
se alguém consegue dar uma luz, agradeço.

<section class="mbr-navbar mbr-navbar--freeze mbr-navbar--absolute mbr-navbar--transparent mbr-navbar--sticky mbr-navbar--auto-collapse" id="ext_menu-80">
    <div class="mbr-navbar__section mbr-section">
        <div class="mbr-section__container container">
            <div class="mbr-navbar__container">
                <div class="mbr-navbar__column mbr-navbar__column--s mbr-navbar__brand">
                    <span class="mbr-navbar__brand-link mbr-brand mbr-brand--inline">
                        <span class="mbr-brand__logo">
                            <a href="http://www.teste.com.br">
                            <img src="assets/images/logo-310x210-13-189x128-61.png" class="mbr-navbar__brand-img mbr-brand__img" alt="Verdes Mares"></a>
                        </span>
                    </span>
                </div>
                <div class="mbr-navbar__hamburger mbr-hamburger"><span class="mbr-hamburger__line"></span></div>
                <div class="mbr-navbar__column mbr-navbar__menu">
                    <nav class="mbr-navbar__menu-box mbr-navbar__menu-box--inline-right">
                        <div class="mbr-navbar__column">
                            <ul class="mbr-navbar__items mbr-navbar__items--right float-left mbr-buttons mbr-buttons--freeze mbr-buttons--right btn-decorator mbr-buttons--active">
                                <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="index.asp">HOME</a></li>
                                <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="empresa.asp">EMPRESA</a></li>
                                <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="servicos.asp">SERVIÇOS</a></li>
                                <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="noticias.asp">NOTICIAS</a></li>
                                
                                        <li class="mbr-navbar__item"><a class="mbr-buttons__link btn text-white" href="contato.asp">CONTATO</a></li>

                            </ul>
                            <ul class="mbr-navbar__items mbr-navbar__items--right mbr-buttons mbr-buttons--freeze mbr-buttons--right btn-inverse mbr-buttons--active">
                                
                                    <li class="mbr-navbar__item"><a class="mbr-buttons__btn btn btn-primary" href="login.asp">LOGIN</a></li>
                                    
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

é um código do mobirise,
tags prontas dele....

preciso q o logo suma da barra onde ficam os menus na NAVBAR.
obrigado.

agradeço a ajuda...

Electronic · Julho 16, 2016

Tem que usar JS como o L. Henrique falou

JS detecta quando e quanto a pagina desceu

marcelocardoso · Julho 18, 2016

sabe informar exemplo?

L. Henrique · Julho 18, 2016

Marcelo,

Já existem muitas dúvidas sobre essa função na internet e no fórum. Veja se esse pen te ajuda: https://codepen.io/Funsella/pen/yLfAG

Abraços!

Arquivado

slider + logo no centro + responsive

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Electronic 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante