Bootstrap 3 Collapse Menu issue with Collapse

2 Views

I have developed a site using wordpress and bootstrap 3 framework. My issue is when its uses the mobile collapse menu it doesn’t display after I click the icon.

Been trying to debug a while now but no luck yet.

Read More

Site is question is

http://www.reillyscott.com.au/

thanks in advance

Post Views: 2

Related posts

Leave a Reply

3 comments 

  1. <div class="collapse navbar-collapse navbar-responsive-collapse">

    Find this div and remove “collapse” class. Its not needed and its causing the issue.

    Edit: Actually that div is not need it at all. You can move its innerHtml out of it and delete it.

  2. It’s because your JS is not changing the state of the menu to display block, maintaining the display:none;

    The menu is being hidden in the bootstrap.css, line 3045.

    You should be toggling the menu when a certain resolution comes, making one display:none and the other display:block.

    To implement Bootstrap menus in WordPress, I recommend you to use WP Bootstrap Nav Walker.

  3. Took me a while to figure out your problem. Instead of going into too much detail, I’ll just tell you what to delete, and it will work! 

    <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" style="height: auto;">
<!--

 The WordPress Menu goes here 

-->
<div class="collapse navbar-collapse navbar-responsive-collapse">  **<--- DELETE THIS DIV**
    <ul id="main-menu" class="nav navbar-nav navbar-right"></ul>

    You already have a navbar-collapse in your first div. You’re using it twice and throwing off the JavaScript. Only delete the opening and closing div. Keep your wordpress menu php code there.

    Message me if you have further questions.

    Cheers,