Change hover bar in menu

[jorimdeporim]

Hi!
Right now, when you go to Atelier Annie Kay, you can see that when you hover over menu items in the header, a blue bar appears above each item. I’d like to change this, either by deleting it, or having the hover-bar under each menu-item. Not at the bottom of the menu, but kind of like an underline. I see stuff like that frequently on other sites, so it has to be possible I think!

I’d really appreciate your help

Cheers!

[nabeel]

Hi there,

Thanks for writing in! This can be done with custom CSS, try adding the following code in the Theme Options > CSS:

.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 !important;
}

.x-navbar .desktop .x-nav > li > a:hover span, .x-navbar .desktop .x-nav > .x-active > a span, .x-navbar .desktop .x-nav > .current-menu-item > a span {
   border-bottom: 4px solid #4bacc6;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[jorimdeporim]

It worked like a charm! Thanks a bunch!

[Alaa]

Thanks @jorimdeporim for updating the thread, you are welcome