CMS Development

andrews1
Participant | Partner
Participant | Partner

Child Navigation items disappearing when getting to third tier

Hey there.

Just implemented a new navigation menu on the site: https://www.primohealthcoach.com but some of the menu items are not easy to get to because there is some space that exists between the 2nd tier and 3rd tier items (see image). This causes the hover effect to fail because when trying to put your mouse on the 3rd tier items, you end up not hovering on the 2nd tier items. Wondering if there is a way to extend the box that holds the 2nd tier items OR reduce the spacing between these menu items. See below image for current CSS for primary nav menu.navigation_issues.png

------------------------------------------------------

.primary-navigation {
font-weight: 600;

}
ul.hs-menu-children-wrapper {padding: 0px 0!important;}
.primary-navigation ul {
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 55px 0 25px 0;
}

.primary-navigation ul li {
margin: 0;
line-height: 1em;
}

.primary-navigation ul li a {
color: #252c59;
}

.primary-navigation ul li a:hover, .primary-navigation ul li a:active {
color: #99bd66 !important;
-webkit-transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}

.primary-navigation ul li a:visited {
color: #252c59;
}

.primary-navigation li ul {
background: #e6e7e8;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
letter-spacing: normal;
font-weight: normal !important;
text-transform: none;
}

.primary-navigation li ul li {
line-height: 1em;
}

.primary-navigation li ul li a {
width: auto !important;
max-width: 100% !important;
}

----------------------------------------------------

Thank you!

0 Upvotes
1 Reply 1
Gonzalo
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Child Navigation items disappearing when getting to third tier

Hey @andrews1,

 

Seems like you already fix it with CSS.


But on my side the third menu was overlaping the end of the second level so I suggest to add a bit more space. For that I would suggest change the left property to initial and use the right property instead for positioning with a percent.

 

 
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper {
    right: -90%;
    left: initial;
    top: 0;
}

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
0 Upvotes