Move the menu item highlighter to under the menu

Support
#1

I know there is a word for the coloured strip that lights up when you hover over a menu item but my brain won’t tell me what it is right now! As a result I haven’t been able to search for other people’s solutions for the problem so sorry if it has been answered elsewhere. I hope you know the thing I mean. How do I move this so it is under the menu item and how do I change its colour?

#2

Hello @hypnorich,

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS to change menu hover border position and color:

.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 2px 0 0 #3a2929;}

Let us know how it goes.

Thanks.

1 Like
#3

That worked perfectly! Thanks!!

#4

I spoke too soon…On a big screen it works great but it’s not quite perfect. When I scroll down the page and the menu area shrinks down a bit the line under the menu item ends up going through the middle of the menu item. Could you modify the code a little so that on scroll the line is a bit lower please?

#5

Hi again,

Can you please share the URL of your site so we can take a look at your setup?

Thanks!

#6

Just posted a private reply in previous maessage

#7

Hi There,

Please find this custom CSS:

@media(min-width: 980px){
a.x-brand.img.resize-logo img {
    width: 100px;
    transition: all 100ms linear;
}
a.x-brand.img img {
    width: 200px;
    transition: all 100ms linear;
}
.x-navbar.resize-navbar{
    min-height: 55px;
    transition: all 100ms linear;

	
}
.x-navbar.resize-navbar .desktop .x-nav > li > a {
    height: 30px;
    padding-top: 20px;
      transition: all 100ms linear;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
  .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 4px 0 0 #65a83e;}

And change to this:

@media(min-width: 980px){
    a.x-brand.img.resize-logo img {
        width: 100px;
        transition: all 100ms linear;
    }
    a.x-brand.img img {
        width: 200px;
        transition: all 100ms linear;
    }
    .x-navbar.resize-navbar{
        min-height: 55px;
        transition: all 100ms linear;

    	
    }
    .x-navbar.resize-navbar .desktop .x-nav > li > a {
        height: 45px;
        padding-top: 20px;
          transition: all 100ms linear;
    }
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }
}

.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 4px 0 0 #65a83e;
}

Let us know how it goes!

#8

That’s the badger! Brilliant stuff, thanks. :wink:

#9

You’re welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.