CODEWITHSUNDEEP
javascriptcsswordpresstwitter-bootstrap
Echo Yang
Echo Yang

Reputation: 520

Bootstrap collapse toggle menu issue with WordPress menu

My problem is that I have a menu which I don't want to display in full-width browser window and when the window width less than 768px it can be seen by toggle bar clicking.
But I found the collapse transition doesn't work when I click the toggle bar. I have tested to remove the "full-hide" class, and it works fine, everything is normal.
I want to have the normal transition. What should I do?
I appreciate your help very much.
:>

It's my menu code 

<div class="full-hide" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

And in style.css,

.full-hide{ display: none;}

toggle bar code

    <button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true">
    </span>
    </button>

Upvotes: 0

Views: 745

Answers (1)

Dorvalla
Dorvalla

Reputation: 5240

If i understand you right, you want the button to show at 768 (which is the max size for small screens).

Since you use bootstrap, you can apply it as well to your button. 

<button type="button" class="navbar-toggle collapsed hidden-md hidden-lg" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true"></span>
</button>

apply the classes hiddden-md and hidden-lg to it. It will show only the button then when your screen goes in lower width.

Optional: Apply this trick to your menu you want to show that way as well, if you use a seperate menu. I am not sure, cause I cant make that up out of your context if this is your main menu and apply BootStrap to it, or you seperate that (i use mostly a different kind of menu for my mobile development)

<div class="hidden-md hidden-lg" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

See for documentation http://getbootstrap.com/css/#responsive-utilities

Upvotes: 1

Related Questions