• Resolved jmamuzich

    (@jmamuzich)


    Hello I added a secondary menu to the theme but now the main nav doesn’t show in mobile view.

    Here is the code in header.php:

    <div id=”top-wrap”>
    <div id=”top-inner”>
    /”><?php bloginfo( ‘name’ ); ?><img src=”https://162.144.99.26/~sacrealt/wp-content/uploads/2014/08/logo2.png&#8221; style=”margin-top: .75em;” />
    <nav id=”site-navigation” class=”sec-navigation” role=”navigation”>
    <h1 class=”menu-toggle”><?php _e( ”, ‘elmax’ ); ?></h1>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘secondary’, ‘depth’ => 1 ) ); ?>
    </nav>
    <header id=”branding” class=”site-header” role=”banner”>
    <h1 id=”logo”>/”><?php bloginfo( ‘name’ ); ?></h1>

    <nav id=”site-navigation” class=”main-navigation” role=”navigation”>
    <h1 class=”menu-toggle”><?php _e( ‘Menu’, ‘elmax’ ); ?></h1>

    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘depth’ => 3 ) ); ?>
    </nav><!– #site-navigation –>
    </header>
    <div class=”clear”></div>
    </div>
    </div>

    and the CSS:

    /* Primary Navigation
    ————————————————————– */
    .main-navigation {
    background: #1e318b;
    display: block;
    float: left;
    margin: 0 auto;
    width: 100%;
    }
    .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .main-navigation li {
    float: left;
    position: relative;
    }
    .main-navigation a {
    color: #fff;
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.5em;
    padding: 0.5em 1.25em;
    text-decoration: none;
    }
    .main-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    left: 0;
    width: 188px;
    z-index: 99999;
    }
    .main-navigation ul ul ul {
    left: 100%;
    top: 0;
    }
    .main-navigation ul ul a {
    background: #3a3a3a;
    color: #fff;
    height: auto;
    line-height: 1.4em;
    padding: 10px;
    width: 168px;
    }

    .main-navigation li:hover > a,
    .main-navigation ul ul :hover > a,
    .main-navigation a:focus {
    background: #62b01e;
    color: #fff;
    }
    .main-navigation ul li:hover > ul {
    display: block;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    background: #62b01e;
    }

    /* Secondary Navigation
    ————————————————————– */
    .sec-navigation {
    display: block;
    float: right;
    margin: 0 auto;
    }
    .sec-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .sec-navigation li {
    float: left;
    position: relative;
    margin-top: 2em;
    }
    .sec-navigation a {
    color: #green;
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.5em;
    padding: 0.5em 1.25em;
    text-decoration: none;
    }
    .sec-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    left: 0;
    width: 188px;
    z-index: 99999;
    }

    .sec-navigation li:hover > a,
    .sec-navigation ul ul :hover > a,
    .sec-navigation a:focus {
    background: #62b01e;
    color: #fff;
    }
    .sec-navigation ul li:hover > ul {
    display: block;
    }
    .sec-navigation .current-menu-item > a,
    .sec-navigation .current-menu-ancestor > a,
    .sec-navigation .current_page_item > a,
    .sec-navigation .current_page_ancestor > a {
    background: #62b01e;
    }

    /* Small menu */
    .menu-toggle {
    display: none;
    cursor: pointer;
    }
    .main-small-navigation > ul {
    display: none;
    }

    What am I doing wrong?

  • The topic ‘Main Navigation Menu Not Showing in Mobile View’ is closed to new replies.