HEADE STICKY – how to change text color

Hi there, I want to have difderent color of menu (link) on a sticky and a standard header.
The sticky backgorund is dark, and the standard header background is white. But I cant find where change color of menu link of a sticky and a standard header. There is a problem with aligment too. The screen is in attachement.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

/*default*/
body  {
    background-color: yellow;
}
body .main-nav .menu > li.current-menu-item > a{
color:red;
}

body .main-nav .menu > li > a{
color:blue;
}

body .main-nav .menu > li > a:hover{
color:red;
}
body .main-nav .menu > li > a{
color:blue;
}
body .main-nav .menu>li.menu-item-has-children > a:after {
    color: red;
}

/*sticky*/
body .main-header.header-has-no-bg.act-scroll {
    background-color:orange;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:red;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a{
color:blue;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:red;
}

Set the colors as per your needs, if you need to change icons as well, provide your site URL

Best Regards

Hi, I have still problem with a background color of a sticky menu and normal menu.
This css that you sent me, doesn’t work. It didn’t change anything.
Could you check it on live site http://artso.com.pl/weye/
Regards
Luke

Hello!

Please replace the current code with one:

 body .header-has-no-bg{
background:red;
}
body .header-has-no-bg .main-nav .menu > li a {
    color: green;
}
body .header-has-no-bg .main-nav .menu>li.menu-item-has-children>a:after {
    color: green;
}
body .header-has-no-bg .main-nav .menu > li a:hover {
    color: blue;
}
body .header-has-no-bg .main-nav .menu >  li.current-menu-item >a {
    color: blue;
}
body .header-has-no-bg .main-nav .menu > li.current-menu-item > a:after {
    color: blue;
}

body .sticky-header.color-scheme-light {
    background-color: yellow;
}
body .sticky-header.color-scheme-light .main-nav .menu > li a {
    color: red;
}
body .sticky-header.color-scheme-light .main-nav .menu>li.menu-item-has-children>a:after {
    color: red;
}

body .sticky-header.color-scheme-light .main-nav .menu > li a:hover {
    color: black;
}
body .sticky-header.color-scheme-light  .main-nav .menu >  li.current-menu-item >a {
    color: black;
}
body .sticky-header.color-scheme-light  .main-nav .menu > li.current-menu-item > a:after {
    color: black;
}

Best Regards

Thank you. There is one thing more. Aligment of links.
On a sticky header links are centered, and on a normal hedear links are align right.
How to align both links to right?
see: http://artso.com.pl/weye/

Best Regards
Luke

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .sticky-header .main-nav {
    text-align: right;
}

Best Regards

[Author]

Posts