Mobile Issues

  • Resolved mpmullally

    (@mpmullally)


    7 years, 9 months ago

    I am having issues with the mobile version of the menu. I am on a local environment building a custom theme. At first the menu would disappear after resizing the window below large and not show the mobile version. I was able to get it to display after a-lot of trial and error. but now it doesn’t display correctly. When you click on the hamburger icon it creates a small div, then you have to click on it again to get it to show the menu options and that div remains.

    If i use my code

    `<nav class=”navbar navbar-inverse navbar-fixed-top”>
    <div class=”container”>
    <div class=”navbar-header” id=”top”>
    <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#main-navbar” aria-expanded=”false” aria-controls=”main-navbar”>
    <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 id=”main-navbar” class=”navbar-collapse collapse”>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
    </div>
    <!–/.nav-collapse –>
    </div>
    </nav>`

    I get my collapse and the plugins collapse. which causes that second drop-down

    If I use this code supplied from another forum post

    <div id="main-navbar" class="navbar-collapse collapse">
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
          </div>

    The mobile menu does not display

    • This topic was modified 7 years, 9 months ago by mpmullally.
    • This topic was modified 7 years, 9 months ago by mpmullally.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mpmullally

    (@mpmullally)

    I have removed all plugins, tried a self hosted version of bootstrap js and css, removed any stylings i had on the navbar and used your default and are still having the issue.

    Plugin Author codetoolbox

    (@codetoolbox)

    Hi,

    The problem is that you are writing your own Bootstrap code around the menu.
    By adding:
    <div id="main-navbar" class="navbar-collapse collapse"> or <nav class=”navbar navbar-inverse navbar-fixed-top”>... you are effectively adding the markup again which will stop the addin from working.

    The solution is to not add any markup at all around your menu! Try adding just your menu like this:
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

    Good luck

    • This reply was modified 7 years, 9 months ago by codetoolbox.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Issues’ is closed to new replies.