Main Navigation Menu Not Showing in Mobile View
-
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” 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.