Home › Forums › WoodMart support forum › Change Main Menu font colour and sticky header colour

Change Main Menu font colour and sticky header colour

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 1, 2020 at 12:23 am #237624

    Arenar Designs
    Participant

    Hi,

    I need some assistance to complete the following:

    1) Change the font colour of the menu items and icons (eg. wishlist and my account icons) to #ffffff.

    2) Change the sticky header background colour to (#e9b696) and font colour of the menu items and icons to (#ffffff)

    Images attached as an example.

    Thanks.

    November 1, 2020 at 3:09 pm #237701

    Elise Noromit
    Member

    Hello,

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

    /*Default icon text*/
    body .wd-tools-element>a {
    color: orange;
    }
    body .wd-tools-element>a:hover {
    color: yellow;
    }
    /*Default header menu*/
    body .woodmart-navigation .item-level-0.current-menu-item>a{
    color:yellow;
    }
    body .woodmart-navigation .item-level-0>a{
    color:yellow;
    }
    body .woodmart-navigation .item-level-0>a{
    color:orange;
    }
    body .woodmart-navigation .item-level-0>a:hover{
    color:yellow;
    }
    body .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
    color:orange;
    }
    body .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
    color:yellow;
    }
    body .woodmart-navigation .item-level-0>a .nav-link-text:after {
    background-color: yellow;
    }
    /*sticky background*/
    body .whb-sticked .whb-general-header {
    background-color: white;
    }
    /*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
    }

    Chose the styles and set the color as per your needs.

    Best Regards

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)