Home Forums Basel – Premium Template Change Menu Bar Color/Transparency

This topic contains 4 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 2 weeks, 5 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #305935

    hhuesca
    Customer

    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!

    Private Content Hidden
    #305981

    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

    #306078

    hhuesca
    Customer

    Hi!

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

    Thank you! 😀

    Private Content Hidden
    #306092

    hhuesca
    Customer

    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.

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #306196

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.