Home Forums WoodMart support forum Main Menu font color while on overlay mode and then change when scroll down

Main Menu font color while on overlay mode and then change when scroll down

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #257810

    BeyondMS
    Participant

    I have a transparent/overlay header. However, I want the text to be WHITE, and when scroll down to switch to black.

    As mentioned, I have a sticky menu – I want to show black (current) text – because the background of the sticky header is white.

    Attachments:
    You must be logged in to view attached files.
    #257862

    Hello,

    Please set the light color in the Header builder for the default (not sticky) header.

    Please add this code to the Theme Settings > Custom CSS > Global to change the background and colors of all the items:

    /*sticky background*/
    body .whb-sticked .whb-general-header {
        background-color: green;
    }
    /*sticky main menu color*/
    body .whb-sticked .woodmart-navigation .item-level-0.current-menu-item>a{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a{
    color:orange;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a:hover{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
    color:orange;
    } 
    body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
    color:yellow;
    } 
    body  .whb-sticked  .woodmart-navigation .item-level-0>a .nav-link-text:after {
        background-color: yellow;
    }
    
    /*My Account*/
    body  .whb-sticked  .woodmart-header-links .item-level-0>a {
        color: orange;
    }
    body  .whb-sticked  .woodmart-header-links .item-level-0>a:hover {
        color: yellow;
    }
    /*Search*/
    body  .whb-sticked  .search-button >a {
        color: orange;
    }
    
    body  .whb-sticked .search-button:hover>a {
        color: yellow;
    }
    /*wishlist*/
    body  .whb-sticked  .woodmart-wishlist-info-widget .wishlist-icon {
    color:orange;
    }
    body  .whb-sticked .woodmart-wishlist-info-widget .wishlist-count{
        color: red;
            background-color: yellow;
    }
    /*cart*/
    body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-icon {
    color:orange;
    }
    body  .whb-sticked  .woodmart-cart-design-5 .woodmart-cart-number{
        color: red;
            background-color: yellow;
    }
    body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-subtotal .amount {
        color: red;
    }
    /*compare*/
    body  .whb-sticked  .woodmart-compare-info-widget .compare-icon {
    color:orange;
    }
    body  .whb-sticked  .woodmart-compare-info-widget .compare-count{
    color:yellow;
    background-color:orange
    }
    body   .whb-sticked  .woodmart-cart-design-2 .woodmart-cart-number{
            color:yellow;
    background-color:orange
    }

    Replace the colors as per your needs and remove unnecessary styles.

    Best Regards

    #257977

    vindesign_it
    Participant

    This answer helped me too. It’works.

    Elise Noromit Thanks 😉

    #257989

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

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

The topic ‘Main Menu font color while on overlay mode and then change when scroll down’ is closed to new replies.