Line Under Link With Sub Menu items

TheSilverBoxAgency · June 2023

How do we have a line underneath a top level menu item in the menu when they have a submenu?

I hate how it looks good here when on the Gallery page:

But when selecting "about" and going to any of those pages *parent or submenu* will not show line to let user know they're on that menu item:

Website is: http://keegans14.sg-host.com/

Phil · June 2023

Hi,

Please try the following CSS code:

.menu-line-below-80-1 #Top_bar:not(.is-sticky) .menu > .menu-item-has-children:hover > a:not(.menu-toggle)::before{
   content: " ";
   height: 1px;
 left: 10%;
 top: 50%;
 margin-top: 20px;
 width: 80%;
   background-color: #fff;
   position: absolute;
}

Put it in Betheme -> Thgeme options -> Custom CSS & JS -> CSS.

Thanks

TheSilverBoxAgency · June 2023

That works for highlighting, but not for underlining when on that page or one one of the children pages. Maybe there's no way to do that? but there should be. =/

It also only works for highlighting, not for when on that top-level parent page.

Phil · June 2023

Please replace the previous code with the following one:

.menu-line-below-80-1 #Top_bar:not(.is-sticky) .menu > .menu-item-has-children:hover > a:not(.menu-toggle)::before,
.menu-line-below-80-1 #Top_bar:not(.is-sticky) .menu > .current-menu-item > a:not(.menu-toggle)::before{
content: " ";
height: 1px;
left: 10%;
top: 50%;
margin-top: 20px;
width: 80%;
background-color: #fff;
position: absolute;
}

Thanks

TheSilverBoxAgency · June 2023

That unfortunately still did not work, as you can see here:

http://keegans14.sg-host.com/services/auto-window-tinting/

Phil · June 2023

I do not see the full CSS I have sent in your website source.

On the right side, you can see CSS which is used on your website.

Please copy this CSS entirely.

Best regards

TheSilverBoxAgency · May 2

Hey there. I added this same code to my new site with new license, and the line flashes only for a second and then disappears. As well, on load, the arrow beside the menu items flashes as well. https://keegans20.sg-host.com/services/

Please advise. Thank you.

Phil · May 3

Now you have a different style selected.

For current website this CSS will work:

.menu-line-below-80 #Top_bar:not(.is-sticky) .menu > .menu-item-has-children:hover > a:not(.menu-toggle)::before,
.menu-line-below-80 #Top_bar:not(.is-sticky) .menu > .current-menu-item > a:not(.menu-toggle)::before{
   content: " ";
   height: 4px;
   left: 10%;
   top: 50%;
   margin-top: 20px;
   width: 80%;
   background-color: #fff;
   position: absolute;
}

Best regards

Line Under Link With Sub Menu items

Comments