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

TheSilverBoxAgency · May 29

I don't understand. Why does it do this EVERY time for every new website?? Why can't I just use the same code and actually have it work for ALL sites I'm building? I've bought over 12 licenses from you, and still this isn't a feature?

Thank you.

TheSilverBoxAgency · May 29

when done testing, please delete the entire post above, including URL and user/pass from this discussion for privacy reasons.

Phil · May 30

The second CSS will work, but you must add a background color.

This is not introduced permanently because this style is based on CSS :before pseudo-class, which is also used for other features, and if we change that, it will break many other websites.

Best regards

TheSilverBoxAgency · May 30

Thank you Phil!

Phil · May 31

You are welcome. ?

Best regards

Line Under Link With Sub Menu items

Comments