Line Under Link With Sub Menu items

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/

Comments

  • 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

  • edited 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.

  • 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

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


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

  • 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

  • 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.

  • 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

  • edited May 30

    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.

  • edited May 29

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

  • 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

  • Thank you Phil!

  • You are welcome. ?


    Best regards

Sign In or Register to comment.