Docs

[Creativenw]

I have made some adjustments to the nav menu to place a different colour underline for each menu item using ;
x-nav a:hover {-moz-box-shadow: 0 8px #00AEEF; -webkit-box-shadow: 0px 8px #00AEEF; box-shadow: 0px 8px #00AEEF; margin-top: 0px; !important}
.x-navbar .desktop .x-nav > li.menu-item-119 > a:hover {-moz-box-shadow: 0 8px #00AEEF; -webkit-box-shadow: 0px 8px #00AEEF; box-shadow: 0px 8px #00AEEF; margin-top: 0px; !important}
.x-navbar .desktop .x-nav > li.menu-item-5160 > a:hover {-moz-box-shadow: 0 8px #BCD631; -webkit-box-shadow: 0px 8px #BCD631; box-shadow: 0px 8px #BCD631; margin-top: 0px;}

etc etc more links….
then
.x-navbar .desktop .x-nav > .current-menu-item > a{box-shadow:0 8px 0 0 #00AEEF !important;} << I dont want this, I just added to make sure it was working.

I know the .current-menu-item is the active link so that forces the colour specified to every link but I want each menu item to have the same hover colour also. I tried adding a:active after each hover but it didnt work. What am I missing ?
Thanks in advance,

[Creativenw]

This reply has been marked as private.

[Jade]

Hi there,

To do that, you will have to add the CSS selectors to target the actual page that is currently open together with the hover CSS like:

.page-id-19 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161 > a:hover {
    -moz-box-shadow: 0 8px #EC008C;
    -webkit-box-shadow: 0px 8px #EC008C;
    box-shadow: 0px 8px #EC008C;
    margin-top: 0px;
}

You can check this article on how to locate the page ID: https://community.theme.co/kb/how-to-locate-post-ids/

Hope this helps.

[Creativenw]

Sorry, not too clear for me. I removeed all my code and added yours supplied above. I need each page to have a different color for hover then when selected take on the color of the hover.. So

“Home” MENU ID = 19 > hover would be say #F06322 then when selected will have the underline selection as #F06322
“Who” MENU ID = 5160 > hover would be #BAD431 then when selected will have the underline selection as #BAD431

etc

SO do I dduplicate the code and chage the li.menu-item-5161 and leave the .page-id-19 ?

Thanks

Mark

[Rupok]

Hi Mark,

You need to duplicate the code and replace the Page ID ( .page-id-19) only. Other selectors should be same.

Cheers!

[Creativenw]

So, I Have gone ahead and and added this

.page-id-19 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161 > a:hover {
    -moz-box-shadow: 0 8px #F06322;
    -webkit-box-shadow: 0px 8px #F06322;
    box-shadow: 0px 8px #F06322;
    margin-top: 0px;
}

.page-id-5160 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161 > a:hover {
    -moz-box-shadow: 0 8px #BAD431;
    -webkit-box-shadow: 0px 8px #BAD431;
    box-shadow: 0px 8px #BAD431;
    margin-top: 0px;
}

.page-id-5161 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161 > a:hover {
    -moz-box-shadow: 0 8px #EA008A;
    -webkit-box-shadow: 0px 8px #EA008A;
    box-shadow: 0px 8px #EA008A;
    margin-top: 0px;
}
 
.page-id-5162 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161 > a:hover {
    -moz-box-shadow: 0 8px #FFC00E;
    -webkit-box-shadow: 0px 8px #FFC00E;
    box-shadow: 0px 8px #FFC00E;
    margin-top: 0px;
}
 
.page-id-5164 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161> a:hover {
    -moz-box-shadow: 0 8px #3B1E74;
    -webkit-box-shadow: 0px 8px #3B1E74;
    box-shadow: 0px 8px #3B1E74;
    margin-top: 0px;
}
 
.page-id-35 .x-navbar .desktop .x-nav > .current-menu-item > a,
.x-navbar .desktop .x-nav > li.menu-item-5161> a:hover {
    -moz-box-shadow: 0 8px #00AEEF;
    -webkit-box-shadow: 0px 8px #00AEEF;
    box-shadow: 0px 8px #00AEEF;
    margin-top: 0px;
}
 
 

It doesnt seem to do change teh seelcted state ? Can you please advise ?

If you look at the hover on the menu all the colors are correct I need them to change to that color on selections.

[Christopher]

Hi there,

Please update your code to :

.x-navbar .desktop .x-nav > li.menu-item-5160 > a:hover, .x-navbar .desktop .x-nav > li.menu-item-5160.current-menu-item > a {
    -moz-box-shadow: 0 8px #bad431;
    -webkit-box-shadow: 0px 8px #bad431;
    box-shadow: 0px 8px #bad431;
    margin-top: 0px;
}
.x-navbar .desktop .x-nav > li.menu-item-5162 > a:hover,.x-navbar .desktop .x-nav > li.menu-item-5162.current-menu-item > a {
    -moz-box-shadow: 0 8px #ffc00e;
    -webkit-box-shadow: 0px 8px #ffc00e;
    box-shadow: 0px 8px #ffc00e;
    margin-top: 0px;
}
.x-navbar .desktop .x-nav > li.menu-item-5164 > a:hover,.x-navbar .desktop .x-nav > li.menu-item-5164.current-menu-item > a  {
    -moz-box-shadow: 0 8px #3b1e74;
    -webkit-box-shadow: 0px 8px #3b1e74;
    box-shadow: 0px 8px #3b1e74;
    margin-top: 0px;
}

.x-navbar .desktop .x-nav > li.menu-item-35 > a:hover,.x-navbar .desktop .x-nav > li.menu-item-35.current-menu-item > a  {
    -moz-box-shadow: 0 8px #00aeef;
    -webkit-box-shadow: 0px 8px #00aeef;
    box-shadow: 0px 8px #00aeef;
    margin-top: 0px;
}

.x-navbar .desktop .x-nav > li.menu-item-119 > a:hover,,.x-navbar .desktop .x-nav > li.menu-item-119.current-menu-item > a {
    -moz-box-shadow: 0 8px #f06322;
    -webkit-box-shadow: 0px 8px #f06322;
    box-shadow: 0px 8px #f06322;
    margin-top: 0px;
}

Hope it helps.

[Creativenw]

Ah, was almost perfect, found an error in one of the lines and now all working great.

Thank you very much.

Can now be marked as solved.

Great work

[Thai]

If you need anything else please let us know.

[Author]

Posts