sticky header home page

Hello,

My question is very simple. I would like the have a white sticky header on the home page.

Actually, the sticky header of the home page is black, the sticky header presents on other pages is white.

Thank you to see the picture.

Best regards,

Hello,

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

body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:yellow;
}

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:after{
color:blue;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:yellow;
}
body .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: white;
}
body .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: #f7f7f7;
}

Set the colors as per your needs.

Best Regards

Hello,

Thank you for your answer.

It is very hard, don’t you have a CSS to enable it? I don’t want to create a new one.

Actually the sticky header of the home page is different than the sticky header that is on other pages and i don’t want that i want to have the same. I Just want to enable it on the home page, thank you.

You can see the picture, (i want this one on the home page).

You can see the pic.

Attachments:

You must be logged in to view attached files.

Hello,

I have provided ready code. You just need to copy it from the forum, change the colors, and paste into the Theme settings. I have now set a white background and dark text. Just copy and paste.

body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: white;
}
body .main-header.header-has-no-bg.act-scroll {
    background-color: white;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:black;
}

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

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:black;
}
body .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: black;
}
body .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: black;
}

There is no option to set that is why I provide custom CSS.

Best Regards

Hello,

Thank you for your answer.

I applied the code, however, we still have some little problem.

Can we add a drop shadow below the header bar? As on the other page of the website..
Also, the sidebar icon is still white so we cannot see it on mobile devices.

For better understanding please refer to the screenshot.

Thank you advance,

Alexandre

Hello,

Add this line: box-shadow: 0 1px 5px rgba(190,190,190,.5); here: https://prnt.sc/svhixp

Please provide page URL and screen of the icons I cannot catch the problem.

Best Regards

[Author]

Posts