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
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
Curtir tópico
+ 0
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
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!
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
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:
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
Clique aqui para fazer login e interagir na Comunidade :)