Wordpress Responsive Multi Level Drop Down Menu

HippySunshine

Senior Member
So I've been playing around with a new theme on Wordpress which includes a multi level drop down menu.
I'm having issues with the responsive drop down and was hoping someone could shed some light as to what I've done wrong or what I need to do.

The code I have is:
(excuse the messy and excessive code, it needs tidying up but I've completely lost track of what I've broken in this lot)

.main-navigation {
display: block;
width: 100%;
}

.main-navigation ul {
text-align: center;
padding: 10px;
margin: 0;
display: none;
list-style: none;
}

.main-navigation li {
display: inline-block;
position: relative;
cursor: pointer;
}

.main-navigation a,
.main-navigation a:visited,
.main-navigation a:active {
color: #222 !important;
font-size: 0.7em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
display: block;
padding: 10px 25px;
}
.main-navigation a:hover {
text-decoration: none;
}

.main-navigation ul ul a {
color: #222 !important;
padding: 20px 25px;
}
.main-navigation ul ul {
background: #eee;
float: left;
position: absolute;
top: auto;
left: -999em;
}
.main-navigation ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}



.main-navigation ul ul a {
width: 200px;
}

.main-navigation ul ul li {
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}

/* adds menu hamburger icon */
.menu-toggle:after {
font-family: FontAwesome;
font-style: normal;
content: "\f0c9";
display: inline-block;
margin-left: 5px;
}

/* adds arrow on drop down items */
.main-navigation ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25bc ";
position: absolute;
}

.main-navigation ul li ul li.menu-item-has-children > a:after,
.main-navigation ul li ul li ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25b6";
position: absolute;
}


/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
color: #222 !important;
font-size: 1em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
background: #faf1ea;
padding: 15px;
border: none;
display: block;
width: 100%;
outline: none;
}

.main-navigation.toggled ul {
background: #eee;
padding: 0;
}
.main-navigation.toggled ul li {
margin: 0;
display: block;
width: 100%;
}
.main-navigation.toggled ul li a {
border-bottom: 1px solid #ddd;
padding: 15px;
}


.main-navigation.toggled ul li:hover > ul,
.main-navigation.toggled ul li.focus > ul {
background: #fafafa;
display: block;
position: relative;
}
.main-navigation.toggled ul li ul li a {
width: 100%;
}


@media screen and (min-width: 1280px) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}

The link to the site I'm working on is http://ohlily.pixelboutique.co.uk

Thanks in advance for any help. My brain is shortly going to explode and I know it's probably something pretty simple.
 
I think I see the problem you're having. This "works" on a mobile layout but I haven't looked at it back on desktop. You might have to tweak it a little more but I was at least able to use the mobile menu through Chrome.

First set
Code:
.main-navigation.toggled ul {
display:inline-block;
}

Then
Code:
.main-navigation.toggled ul li {
display:inline-block;
}

These two blocks should make it possible to see and click on the sub menus.Then set
Code:
.main-navigation ul ul li:hover > ul {
left:auto;
}

This is set to 100% which is pushing them off screen.

In future definitely look to switch to using something like Sass for writing CSS. You've got a lot of defunct and pointless styles applied and have repeated a lot of stuff. Using Sass or Less will help you write code that's easier to maintain and is DRY (Don't Repeat Yourself).
 
I should have clarified that what isnt working is the sub menu dropdowns in the mobile view... thanks for that though and yeah my css needs looking at and tidying, its just mid break down.
 
Thank you so much this worked. I need to tidy up my CSS and am aware I have a lot of repetition, I'm still in the playing process.
 
I've started to build a website using one of the wordpress photography themes on https://www.templatemonster.com/portfolio-wordpress-themes/ and I maybe I'll face the same problem. Anyway, this information is useful for me too. Thanks!

Responsive multi level drop down menus are my worst nightmare. For some reason I can't get my head around it. So if anyone has a useful tutorial to share I would be very grateful.

How is your site coming along Emily?
 
Ok I'm having serious issues with getting my head around Wordpress Responsive Multi Level Drop Down Menus.
Does anyone have a complete source or tutorial that I could look at that is specifically for WP? I've hit a brick wall and this is the only area of WP that I struggle with and end up with very messy code :(
 
Back
Top