Header Menu Formatting for Multiple Levels - Child Items Not Expanding

SOLVE
JOnorato
Member

Hi, I've been having a hard time fixing the formatting of child items under our header menu. I've been trying for weeks and havent come to a resolution, so very much hoping someone can help!

 

My company hosts our main website on Wordpress and blog/landing pages on Hubspot, so this only applies to the headers on our hubspot pages.  For some reason, after we started adding more levels, I noticed the child items were not expanding properly under its parent item which makes our nav experience really bad...

 

 You can see the incorrect formatting on our blog listing page (blog.intentsify.io)--the menu item 'Company' at the top should expand to 'careers' 'newsroom' 'our story' and 'contact.' But as you can see, the child items under 'Careers (jobs, culture, etc.) don't expand to the right like they should and everything is just squished together. (same for 'our story' which should have 'leadership team' under it).

 

 I'm trying to get the menu formatting to match that of our homepage on Wordpress--doesnt have to be perfect but as long as I can get the menus expanding properly id be happy. I tried going in and adjusting css/html myself, consulted numerous reps, and have had no luck.

 

Greatly appreciate anyone's help with this 🙂 

0 Upvotes
1 Accepted solution

Accepted Solutions
erod
Solution
Contributor

@JOnorato 

Try something like this: 

  • li.has-submenu.menu-item:hover > ul display: block;}
  • li.has-submenu.menu-item > ul { display: none; }

This should work but you still have to style it to get the desired look.

 

https://www.screencast.com/t/fhphLeij

 
 
 

View solution in original post

0 Upvotes
4 Replies 4
erod
Contributor

Hey @JOnorato , menu problems suck! 

 

It seems like you need to hide the third level menu (display: none;) and then you need to add an ">" between li:hover and ul (ie: li:hover > ul) and add "Display: block;" to it. 

 

After that, you'll need to style to make it look like your website.

 

This might help: https://stackoverflow.com/questions/8752944/css-drop-down-navigation-3rd-level-issue

JOnorato
Member

Hi! Appreciate the quick response -- still having trouble with this. Can you point me to exactly where i need to make those adjustments? Here's some of the css im working with: 

 

}
.custom-menu-primary .submenu.level-1 > li:hover > a {
color: #ffffff;
background-color: #54595f;
}
.custom-menu-primary .submenu.level-2 > li {
display: block;
border-width: 0;
}
.custom-menu-primary .submenu.level-1 > li.child-open > a {
color: #ffffff;
background-color: #54595f;
}
.custom-menu-primary .submenu.level-2 > li:not(:last-child) {
border-style: solid;
border-color: rgba(0,0,0,0.69);
border-bottom-width: 1px;
}
.custom-menu-primary .submenu.level-2 {
font-size: 13px;
list-style: none;
margin: 0;
padding: 0;
line-height: normal;
display: none;
}

.custom-menu-primary .submenu.level-2 > li {
display: block;
border-width: 0;
}

.custom-menu-primary .submenu.level-2 > li:not(:last-child) {
border-style: solid;
border-color: rgba(0,0,0,0.69);
border-bottom-width: 1px;
}

.custom-menu-primary .submenu.level-2 > li > a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 20px;
line-height: 20px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-shadow: none;
border-left: 8px solid transparent;
padding-left: 0px;
padding-right: 0px;
color: #ffffff;
font-size: 13px;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
font-weight: 400;
}
.custom-menu-primary .submenu.level-2 > li > a:hover{
color: #ffffff;
background-color: #54595f;
}
}

0 Upvotes
erod
Solution
Contributor

@JOnorato 

Try something like this: 

  • li.has-submenu.menu-item:hover > ul display: block;}
  • li.has-submenu.menu-item > ul { display: none; }

This should work but you still have to style it to get the desired look.

 

https://www.screencast.com/t/fhphLeij

 
 
 

View solution in original post

0 Upvotes
JOnorato
Member

THANK YOU! This worked! Just have to style now, thaank you so much!