Want to change the border color around navbar links when you hover over them

[april]

Hello, as the title suggests, I would like to change the color of the borders that appear around my links in the navbar, when I hover over them. Currently, they are a light gray, and we want them to be darker. The exact color code is #58595b

Any help is appreciated!

[jade]

Hi April,

Please try this code in the Global 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: inset 0 4px 0 0 #58595b;
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[april]

Hi Jade,

This adds a gray bar to the top of each menu item, but it does not change the color of the circle around each menu item when you hover over it.

[jade]

Hi April,

Please try this code instead:

.x-navbar .desktop .x-nav>.x-active>a>span, 
.x-navbar .desktop .x-nav>.current-menu-item>a>span, 
.x-navbar .desktop .x-nav>li>a:hover>span {
    border-color: #58595b;
}

In case this does not work, kindly provide the URL to your site and the admin access if you have a coming soon page active.

Thank you.

[april]

Hi Jade,

That link did work - but I still see the dark gray bar that was added at the top. That was from the code you originally gave me, but we don’t want to a bar at the top.

The web address is https://techpilotlabs.com

Thanks!

[thai]

Hi There,

Did you remove the original CSS yet?

This is how your menu looks on my end:

I couldn’t see the grey bar. Can you send us with a screenshot?

Thanks.

[april]

I am now seeing the same thing.

Great! Thanks!

[jade]

Hi April,

In case it happens again, you may clear your browser cache in case you are still seeing the previous version of the site.

Cheers!