Customized underline of selected and hover-over menu item

[cubistular]

I am trying to get a white line underneath the menu item for the page that the user is currently viewing… a bit like on this site: https://www.unionstationyoga.co.uk/ with the red underline.

I have managed to get a white underline using this CSS code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: 0 3px 0 #FFFFFF;
}

… but the line is very low below the menu items (right at the bottom, outside of the menu region), basically underneath the menu. I would like the line to move up slightly so that it is inside the menu block and closer to the text (so that the line is half way between the bottom of the menu block and the text of the menu items).

Please could someone assist?

My URL is https://pierreosteopath.com

Many thanks in advance!

[jade]

Hey @cubistular,

Please try this code instead:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a span {
    position: relative;
}

.x-navbar .desktop .x-nav > li:not(#menu-item-857) > a:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin-top: 8px;
    opacity: 0;
}

.x-navbar .desktop .x-nav > li > a:hover:after {
    opacity: 1;
}

Hope this helps.

[cubistular]

@Jade - sadly that’s not working. It just gets rid of the line altogether (and also the arrows for dropdown menu items; I would really like to keep these!). Is there something else I can try?

[cubistular]

Here’s what is currently there is this:

… and here is what I would like it to be:

Note the only difference is the white underlining line.

Any help would be much appreciated!

[rad]

Hi @cubistular,

Please change the CSS provided by Jade to this

    .x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a span {
    position: relative;
}

.x-navbar .desktop .x-nav > li:not(#menu-item-857) > a:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin-top: 8px;
    opacity: 0;
}

    .x-navbar .desktop .x-nav > li > a:hover:after, 
.x-navbar .desktop .x-nav > .x-active > a:after, 
.x-navbar .desktop .x-nav > .current-menu-item > a:after {
    opacity: 1 !important;
}

Hope this helps.

[cubistular]

That works brilliantly!! Exactly how I was hoping. Many thanks @Rad

[thai]

You’re most welcome.