WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Mobile menu won't hide - Twenty Twelve (2 posts)

  1. hrrubin
    Member
    Posted 6 months ago #

    Hello
    I have a site where I'm experimenting with a mobile menu. I have created a new template and put all needed styles, html and javascript there, because the rest of the site is live.

    As you can see on the link, the menu works fine until the mobile menu appearing, showing the content instead of hiding it.

    What am I doing wrong here?

    This is the web page.

    HTML/PHP

    <nav id="site-navigation" class="secondary-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav>

    CSS:

    .secondary-navigation {
    	margin:0 auto;
    	padding:0 0 20px 0;
    	text-align: center;
    	position:absolute;
    	z-index:100;
    	top:0;
    	left:0;
    	height:auto;
    	width:100%;
    	background:#000;}
    
    .secondary-navigation ul{
    	max-width:100%;
    	height:auto;
    	margin:0 auto;
    	width:100%;
    	}
    .secondary-navigation li {
    	font-size: 1em;
    	margin-top:5px;
    	padding:0 8px 0 8px;
    	border-left:1px solid #555;
    }
    .secondary-navigation li:first-child{
    	border-left:none;}
    
    .secondary-navigation a {
    	color: #ffffff;
    	font-family: 'octin_spraypaint_freeregular';
    }
    .secondary-navigation a:hover {
    	color: #000;
    }
    	.secondary-navigation{}
    	.secondary-navigation ul {
    		margin-top: 0;
    		text-indent: 0;
    		height:30px;
    	}
    	.secondary-navigation li a,
    	.secondary-navigation li {
    		display: inline-block;
    		text-decoration: none;
    	}
    	.secondary-navigation li a {
    		border-bottom: 0;
    		color: #fff;
    		font-size:2em;
    		text-transform: uppercase;
    		white-space: nowrap;
    	}
    	.secondary-navigation li a:hover {
    		color: #F00;
    	}
    	.secondary-navigation li {
    		height:1.9em;
    	}
    	.secondary-navigation li ul {
    		display: none;
    		margin: 0;
    		padding: 0;
    		position: absolute;
    		top: 100%;
    		z-index: 1;
    	}
    	.secondary-navigation li ul ul {
    		top: 0;
    		left: 100%;
    	}
    	.secondary-navigation .current-menu-item > a,
    	.secondary-navigation .current-menu-ancestor > a,
    	.secondary-navigation .current_page_item > a,
    	.secondary-navigation .current_page_ancestor > a {
    		color: #F00;
    		font-weight: bold;
    	}
    	.menu-toggle{display:none;}
    @media only screen and (max-width:1359px){
    	.secondary-navigation{
    	max-width:550px;
    	right:0;
    	left:0;
    	}
    }
    @media only screen and (max-width:900px){
    	.secondary-navigation{margin-top:40px;}
    }
    
    @media only screen and (max-width:650px){
    	.menu-toggle {
    		display: inline-block;
    		width:100px;
    		height:20px;
    		font-size:1.2em;
    		margin-top:40px;
    	}
    	.secondary-navigation{
    		margin-top:0;
    		text-align:center;
    		}
    
    	.secondary-navigation ul.nav-menu,
    	.secondary-navigation div.nav-menu > ul {
    		display: inline-block !important;
    		text-align: left;
    		width: 100%;
    		margin-top:10px;
    	}
    	.secondary-navigation ul {
    		display:none;
    		margin: 0;
    		text-indent: 0;
    
    	}
    	.main-navigation li a,
    	.secondary-navigation li {
    		display: inline-block;
    		text-decoration: none;
    		border:none;
    		text-align:center;
    		padding:0 0 5px 0;
    		margin:0;
    		width:100%;
    		background:#000;
    
    	}
    	.secondary-navigation li a {
    		color: #777;
    		text-transform: uppercase;
    		white-space: nowrap;
    		font-family:Arial, Helvetica, sans-serif;
    		font-size:1.2em;
    		line-height:1.8em;
    		border-top:1px solid #333;
    		border-bottom:1px solid #333;
    		border-left:none;
    		border-right:none;
    
    	}
    	.secondary-navigation li a:hover {
    		color: #fff;
    	}
    	.secondary-navigation li {
    		position: relative;
    	}
    	.secondary-navigation li ul {
    		display: none;
    		margin: 0;
    		padding: 0;
    		position: absolute;
    		top: 100%;
    		z-index: 1;
    	}
    	.secondary-navigation li ul ul {
    		top: 0;
    		left: 100%;
    	}
    	.secondary-navigation ul li:hover > ul {
    		border-left: 0;
    		display: block;
    	}
    	.secondary-navigation li ul li a {
    		background: #000;
    		border-bottom: 1px solid #ededed;
    		display: block;
    		font-size: 11px;
    		font-size: 0.785714286rem;
    		line-height: 2.181818182;
    		padding: 8px 10px;
    		padding: 0.571428571rem 0.714285714rem;
    		width: 180px;
    		width: 12.85714286rem;
    		white-space: normal;
    	}
    	.secondary-navigation li ul li a:hover {
    		color: #f00;
    	}
    	.secondary-navigation .current-menu-item > a,
    	.secondary-navigation .current-menu-ancestor > a,
    	.secondary-navigation .current_page_item > a,
    	.secondary-navigation .current_page_ancestor > a {
    		color: #fff;
    		font-weight: bold;
    	}
    
    	}

    JavaScript: (as it comes with Twenty Twelve)

    ( function() {
    	var nav = document.getElementById( 'site-navigation' ), button, menu;
    	if ( ! nav )
    		return;
    	button = nav.getElementsByTagName( 'h3' )[0];
    	menu   = nav.getElementsByTagName( 'ul' )[0];
    	if ( ! button )
    		return;
    
    	// Hide button if menu is missing or empty.
    	if ( ! menu || ! menu.childNodes.length ) {
    		button.style.display = 'none';
    		return;
    	}
    
    	button.onclick = function() {
    		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
    			menu.className = 'nav-menu';
    
    		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
    			button.className = button.className.replace( ' toggled-on', '' );
    			menu.className = menu.className.replace( ' toggled-on', '' );
    		} else {
    			button.className += ' toggled-on';
    			menu.className += ' toggled-on';
    		}
    	};
    } )();
  2. Marklcm
    Member
    Posted 5 months ago #

    I can't figure it out, but think it has to do with the id and class names
    assigned. I had a bit of a google around as I have no doubt you did. Did you find
    http://wordpress.org/support/topic/add-second-menu-to-twenty-twelve?replies=10

    M

Reply

You must log in to post.

About this Theme

About this Topic