Class collapse do Booststrap

29/11/2016

0

Olá,
Gostaria de uma ajuda com a classe collapse do Booststrap.

Utilizo o Mozila Firefox no modo mobile para verificar como esta meu código em diferente resoluções e gostaria que aparecesse o ícone do menu mobile (aquela com os três traços) somente quando os itens do menu não coubessem na tela, ou seja, só aparecer os nomes do menu caso a resolução realmente caiba todos os itens. Nas resoluções menores que 1280x600 os itens ficam um abaixo do outro, mesmo quando altero o tamanho da coluna, o ícone só aparece se a resolução for 360×640 e 320×480.

Tenho o seguinte código

div class="menu">
        <div class="container">
            <div class="row">
            <div class="col-sm-6 col-md-4 logo">
               <a href="<?php bloginfo('home' ); ?>"><img src="<?php bloginfo('template_url'); ?>/assets/images/logo.png" class="img-responsive"> </a>
            </div>
                <div class="col-sm-6 col-md-8">
                    <nav class="navbar navbar-default">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                            
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                           <ul class="nav navbar-nav navbar-right">
                          <li>
                               <?php
                                    wp_nav_menu( array(
                                        'menu'              => 'primary',
                                        'theme_location'    => 'primary',
                                        'depth'             => 2,
                                        'container'         => 'div',
                                        'container_class'   => 'collapse navbar-collapse navbar-collapse-custom',
                                        'container_id'      => 'bs-example-navbar-collapse-1',
                                        'menu_class'        => 'nav navbar-nav',
                                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                        'walker'            => new wp_bootstrap_navwalker())
                                    );
                                ?>
                           </li>     
                        </ul><!-- /.navbar-collapse -->
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
            </div>
        </div>
    </div>
</div>
Randys Machado

Randys Machado

Responder

Post mais votado

30/11/2016

já entendi o que está acontecendo, assim eu fiz uns ajustes no seu código por que tinhas umas Tags interpoladas, quanto ao problema dos itens de menu um abaixo do outro no bootstrap tem uma variável no sass que se chama @grid-float-breakpoint e o valor Default dela é de 768px, é ela quem define quando vai aparecer o botãozinho com os 3 risquinhos e tal, no própio site do Bootstrap vc pode alterar essa variável e compilar e baixar customizado, fiz um teste alterei para 1280px como é o seu caso que vc está testando em resoluções menores do que 1280, isso acredito que vá resolver parte do seu problema, vá na seção Media queries breakpoints na página de customização do Bootstrap e procure pela variável @screen-sm de um control + F na página, nessa mesma seção tem outras variáveis de corte do collapse também @screen-md, @screen-tablet e por ai vai, acredito que vá ter que customizar essa variável e talvez outras para adaptar seu site ou sistema sua página, o próprio site do bootstrap fala sobre esse problema do collapse (Changing the collapsed mobile navbar breakpoint), um conselho é não colocar muitos itens de menu na nav bar, recomendação do pessoal do bootstrap, espero ter ajudado, a segue uns ajustes que fiz no código que postou veja se te ajuda:

  <!-- layout usado para a dúvida -->

    <div class="menu">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4 logo">
                    <a href="<?php bloginfo('home' ); ?>"><img src="<?php bloginfo('template_url'); ?>/assets/images/logo.png" class="img-responsive"> </a>
                </div>
                <div class="col-sm-6 col-md-8">

                    <nav class="navbar navbar-default">

                        <div class="container-fluid">

                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>                                
                            </div>    
                        
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="#">Item 1 do Menu</a></li>
                                    <li><a href="#">Item 2 do Menu</a></li>
                                    <li><a href="#">Item 3 do Menu</a></li>
                                    <li><a href="#">Item 4 do Menu</a></li>
                                    <li><a href="#">Item 5 do Menu</a></li>
                                    <li><a href="#">Item 6 do Menu</a></li>
                                    <li><a href="#">Item 7 do Menu</a></li>   
                                </ul><!-- /.navbar-collapse -->
                            </div><!-- /.navbar-collapse -->

                        </div><!-- /.container-fluid -->
                    </nav>
              </div>
        </div>
    </div>  

    <!-- Fim Layout usado para a dúvida --->

Kleber Araujo

Kleber Araujo
Responder

Mais Posts

30/11/2016

Kleber Araujo

e aí Randys td blz, poderia postar o que a sua função php wp_nav_menu renderezira, para eu ter uma ideia dos itens que vc está colocando lá para testar o collapse corretamente, valeu
Responder

30/11/2016

Kleber Araujo

Complementado a resposta anterior há solução legal, seria colocando o tamanho do col-md e col-sm com valores o dobro da quantidade dos seu itens de menu, se as respostas te ajudarem deixa um Joinha pra nós =)
Responder

30/11/2016

Randys Machado

Obrigado pela ajuda Skletor, foi de grande ajuda cara fico muito agradecido.
Um abraço!
Responder

30/11/2016

Randys Machado

Meu caro Skletor, tu poderia me ajudar mais uma vez cara? Eu sei que é chato, mas estou começando agora nesse assunto.
Agora eu gostaria de uma ajuda na posição do botão, segue o link da imagem Menu
Como faço para que minha logo e botão fiquem na mesma linha? Já alterei as colunas e nada acontece, tu poderia me ajudar nessa se não for pedir muito?

Obrigado
Responder

01/12/2016

Kleber Araujo

opa e ai Randys, claro que posso, só que vc poderia me mandar o código novamente, a imagem eu não consigo acessar aqui da empresa, está bloqueado, se tiver outro local que possa postar, mas claro que em casa eu posso ver tranquilamente, mas posso te ajudar tranquilo
Responder

01/12/2016

Randys Machado

Ae Skletor, o código é o mesmo não mudou nada eu só alterei o ssas do bootstrap como tu me explicou anteriormente. A respeito da imagem como tu quer que eu lhe envie? Email, compartilhar pelo Drive... tu decide a melhor forma.

<div class="menu">
        <div class="container">
            <div class="row">
            <div class="col-md-4 logo">
               <a href="<?php bloginfo(''home'' ); ?>"><img src="<?php bloginfo(''template_url''); ?>/assets/images/logo.png" class="img-responsive" alt="Anuncie Porangatu"> </a>
            </div>
                <div class="col-md-8">
                    <nav class="navbar navbar-default">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                            
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                           <ul class="nav navbar-nav navbar-right">
                          <li>
                               <?php
                                    wp_nav_menu( array(
                                        ''menu''              => ''primary'',
                                        ''theme_location''    => ''primary'',
                                        ''depth''             => 2,
                                        ''container''         => ''div'',
                                        ''container_class''   => ''collapse navbar-collapse navbar-collapse-custom'',
                                        ''container_id''      => ''bs-example-navbar-collapse-1'',
                                        ''menu_class''        => ''nav navbar-nav'',
                                        ''fallback_cb''       => ''wp_bootstrap_navwalker::fallback'',
                                        ''walker''            => new wp_bootstrap_navwalker())
                                    );
                                ?>
                           </li>     
                        </ul><!-- /.navbar-collapse -->
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
            </div>
        </div>
    </div>
</div>
Responder

02/12/2016

Kleber Araujo

Opa blz, cara pode me mandar por email: kleber.mvc@hotmail.com

mas veja se essa alteração já resolve o que precisa, dei uma alterada na posição da imagem, só não esquece de colocar seu código php para definir o local da imagem, eu usei uma imagem local no meu teste:

<!-- layout usado para a dúvida -->

    <div class="menu">
        <div class="container">
            <div class="row">
                
                <div class="col-sm-12 col-md-12">
					
                    <nav class="navbar navbar-default">
						
						<div class="col-sm-2 col-md-2 logo">
						<a href="<?php bloginfo('home' ); ?>"><img src="images/logo.png" width="50" height="50" class="img-responsive"> </a>
						</div>
						
                        <div class="container-fluid">

                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>                                
                            </div>    
                        
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="#">Item 1 do Menu</a></li>
                                    <li><a href="#">Item 2 do Menu</a></li>
                                    <li><a href="#">Item 3 do Menu</a></li>
                                    <li><a href="#">Item 4 do Menu</a></li>
                                    <li><a href="#">Item 5 do Menu</a></li>
                                    <li><a href="#">Item 6 do Menu</a></li>
                                    
                                </ul><!-- /.navbar-collapse -->
                            </div><!-- /.navbar-collapse -->

                        </div><!-- /.container-fluid -->
                    </nav>
              </div>
        </div>
    </div>
    

    <!-- Fim Layout usado para a dúvida --->
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar