Line Under Link With Sub Menu items

TheSilverBoxAgency

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

TheSilverBoxAgency

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

TheSilverBoxAgency

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

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

TheSilverBoxAgency

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

TheSilverBoxAgency

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

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

TheSilverBoxAgency

Thank you Phil!

Phil

You are welcome. 😉

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next