Underline for active menupoint won't change colour with custom CSS

[alidarosie]

Hi Armin and Marius,

I am working on a home page for a website where the menu text is white instead of black as it is on all other pages. I followed your instructions in Documentation 'CSS based on current page', but the underline for the active menu point is still showing as black, not white. I have tried several times to fix but nothing works.

Here is the page: http://originalprojects.co.uk/category/now/ ...you will see Now is still underlined in black, but I want it to be white. I am using Chrome.

This is the code I have in custom CSS:
/* navigation /
body.slug-now nav.primary a{
color: white;
}
/ navigation /
body.slug-now nav.primary a{
color: white;
}
/ navigation mouseover /
body.slug-now nav.primary a:hover{
color: white;
}
/ navigation mouseover underline color /
body.slug-now nav.primary a:hover span{
border-bottom-color: white;
}
/ navigation transition */
nav.primary a{
transition: all 600ms ease;
-moz-transition: 600ms ease;
-o-transition: 600ms ease;
-webkit-transition: all 600ms ease;
}

Could you please advise how to fix this?

Thanks very much,
Alida

[mariusjopen]

Dear @alidarosie

try this:

nav.laynav .current-menu-item>a span {
    border-bottom-color: white;
}

Best!
Marius

[alidarosie]

@mariusjopen said in Underline for active menupoint won't change colour with custom CSS:

nav.laynav .current-menu-item>a span {
border-bottom-color: white;
}

Thank you so much Marius, that is perfect! For anyone else with the same issue, I just had to add body.slug-page-title in front of this to point it to apply to a specific pages. All the best, Alida

[Richard]

Dear @alidarosie

Great to hear!

All the best & thank you for using Lay Theme :)

Best
Richard