Home › Forums › Basel support forum › Change Menu Bar Color/Transparency

Change Menu Bar Color/Transparency

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 11, 2021 at 11:33 pm #305935

    hhuesca
    Participant

    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!

    July 12, 2021 at 8:09 am #305981

    Elise Noromit
    Member

    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

    July 12, 2021 at 1:23 pm #306078

    hhuesca
    Participant

    Hi!

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

    Thank you! 😀

    July 12, 2021 at 1:36 pm #306092

    hhuesca
    Participant

    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.
    July 12, 2021 at 11:00 pm #306196

    Elise Noromit
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)