Docs

[mrsnooch]

Hi,

regarding https://www.kathygrahamstrategies.com

I didn’t like the red box-shadow that appeared when hovering over a menu so hid it using;

.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 0 0 0;
}

However I would like there to be a #711b45 colored bottom border when I hover over the menu. How can I achieve this?

Thanks
Mark

[Prasant Rai]

Hello Mark,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav > li > a:hover {
    border-bottom: 2px solid #711b45;
}

Thanks.

[mrsnooch]

Thanks Prasant Rai,

Just as a follow up, how do I make the current menu item remain this color?

Thanks
M

[Joao]

Update the code above to

.x-navbar .desktop .x-nav > li > a:hover , .x-navbar .desktop .x-nav > li > a:active {
    border-bottom: 2px solid #711b45;
}

Hope it helps

Joao

[mrsnooch]

Hi Joao,

I modified your code slightly to make the font color also #711b45, but it doesn’t seem to work for active. It works perfectly on hover, but not for active links?

Code I’m using is

.x-navbar .desktop .x-nav > li > a:hover , .x-navbar .desktop .x-nav > li > a:active {
    border-bottom: 2px solid #711b45;
    color: #711b45;
}

.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 0 0 0;
}

Thanks
Mark

[Friech]

Hi Mark,

In that case, please let us inspect your site. Currently it is under maintenance mode, please provide us login credentials in private reply or disable the maintenance mode for a while.

Thanks.

[mrsnooch]

This reply has been marked as private.

[Paul R]

Hi Mark,

Kindly change your code 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 {
      border-bottom: 2px solid #711b45;
      color: #711b45;
      box-shadow:none;
}

Hope that helps.

[mrsnooch]

Hi Paul,

I’m afraid this actually makes matters worse.

It adds the top purple line that I wanted removed, and it also takes away the purple color of the text on hover links, but still doesnt add to the active links.

The confirm, what I would like is links are black by default.
When you hover, you get a 711b45 line underneath as well as the font color being 711b45 also
Active links maintain the 711b45 font color.

Thanks
Mark

[Friech]

Hi Mark,

I did go ahead and merge this two css blocks.

.x-navbar .desktop .x-nav > li > a:hover , .x-navbar .desktop .x-nav > li > a:active {
    border-bottom: 2px solid #711b45;
    color: #711b45;
}

/*Styles color of menu highlight*/
.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 0 0 0;
}

To this:

/*Styles color of menu highlight*/
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > li > a:active,
.x-navbar .desktop .x-nav li.current-menu-item a {
	box-shadow: inset 0 0 0 0;
	border-bottom: 2px solid #711b45;
    color: #711b45;
}

You should get the style for hover and active now.

Make sure to clear your browser’s cache before previewing the page.

Cheers!

[mrsnooch]

Hi Friech,

My apologies. Even running the site in incognito or clearing the cache still didn’t reset the changes until my browser coincidentally crashed, then it all loaded up fresh.

No idea what happened but it’s working now so many thanks for your help!
Sorry for confusion!

Mark

[Friech]

Hi Mark,

It could be one of your browser extension is interfering with the customizer. Try using another browser or deactivating the extension and see if the customizer still crash.

Thanks.

[Author]

Posts