Change Menu Bar Color/Transparency

Hi!

I’m using the Parallax Home Page demo. How can I change the menu bar transparency and color, and also, the sticky header color.

Thank you so much!

Hello,

You can find all the options related to the Header in the Theme Settings > Header.

The menu bar can be changed with custom CSS, the header option changes the background color of the whole header.
zx
Please add this code to the Theme Settings > Custom CSS > Global for the sticky header:

body.woocommerce .sticky-header.act-scroll {
    background-color: yellow;
}
body.woocommerce .sticky-header.act-scroll {
    background-color: yellow;
}
body.woocommerce  .sticky-header.act-scroll .menu>li.current-menu-item>a{
color:red;
}

body.woocommerce  .sticky-header.act-scroll .menu > li > a{
color:green;
}
body.woocommerce  .sticky-header.act-scroll .menu > li > a:after{
color:green;
}

body.woocommerce .sticky-header.act-scroll .menu > li > a:hover{
color:red;
}
body.woocommerce .sticky-header.act-scroll .right-column > .search-button a{
    color: red;
}
body.woocommerce .sticky-header.act-scroll .right-column>div>a {
    color: red;
}

Replace the color as per your needs.

Best Regards

Hi!

Thank you for your response, but that didn’t worked. Please check the attached screenshot.

Thank you! 😀

Sorry, the attachment didn’t went through. The header in the Parallax Homepage is very transparent, I can’t change the transparency on the theme options and also the colors.

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this one:

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

As for the background color for the default header, you can find the option in the Theme Settings > Header > Appearance.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts