WordPress.org

Ready to get started?Download WordPress

Forums

Twentytwelve - problems with mobile menu (1 post)

  1. hrrubin
    Member
    Posted 6 months ago #

    Some time ago I created a website from the twentytwelve theme (I didn't knew about child themes at the time).

    So I want a mobile menu, but it doesn't seem to hide the sub ul's.

    I have created a different template, where I test the menu, which is why the relevant stylesheet is placed in the header as a whole.

    I'm only testing the menu on this page, so don't worry about the rest.
    The page: danieldikov.com/ny-menu/

    What I believe is the relevant piece of styling:

    @media only screen and (max-width:650px){
    	.menu-toggle {
    		display: inline-block;
    	}
    	.secondary-navigation{margin-top:0;}
    
    	.menu-toggle{
    		margin-top:40px;
    	}
    	.secondary-navigation ul.nav-menu,
    	.secondary-navigation div.nav-menu > ul {
    		display: inline-block !important;
    		text-align: left;
    		max-width: 100%;
    		margin-top:40px;
    	}
    	.secondary-navigation ul {
    		margin: 0;
    		text-indent: 0;
    	}
    	.secondary-navigation li a,
    	.secondary-navigation li {
    		display: inline-block;
    		text-decoration: none;
    	}
    	.secondary-navigation li a {
    		border-bottom: 0;
    		color: #fff;
    		text-transform: uppercase;
    		white-space: nowrap;
    	}
    	.secondary-navigation li a:hover {
    		color: #f00;
    	}
    	.secondary-navigation li {
    		margin: 0 40px 0 0;
    		margin: 0 2.857142857rem 0 0;
    		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;
    	}
    }

    Can you see what is wrong?

Reply

You must log in to post.

About this Topic