Menu Icon text label color

Hello,

How can I change the menu icon text colour on mobile sticky header?

This is what was done for the icon… I just need for the actual text beside the icon that says MENU

/*sticky*/
body .whb-sticked .woodmart-burger-icon .woodmart-burger {
color: black;
}

/*default*/
body .woodmart-burger-icon .woodmart-burger {
color: white;
}

Hello,

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

/*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 need and remove the styles you do not need.

Best Regards

Hello, this still doesn’t have the color change for the MENU text. The burger icon I have…I just need to change the text beside the icon that says MENU. The code below is what I have.

.menu-simple-dropdown .sub-menu-dropdown, .menu-simple-dropdown .sub-sub-menu
{
width: 250px;
}

.whb-sticked .whb-row.whb-general-header {
background-color: #ffffff;
}

.whb-sticked .whb-color-light .navigation-style-underline .item-level-0:hover>a {
color: black;
}

/*sticky main menu color*/
body .whb-sticked .woodmart-navigation .item-level-0.current-menu-item>a{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0>a{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0>a{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0>a:hover{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:black;
}
body .whb-sticked .woodmart-navigation .item-level-0>a .nav-link-text:after {
background-color: #1675bb;
}

/*sticky*/
body .whb-sticked .woodmart-burger-icon .woodmart-burger {
color: black;
}

/*default*/
body .woodmart-burger-icon .woodmart-burger {
color: white;
}

Hello,

Please provide your site admin access to the private area. Please remove the custom CSS provided and show the screen what elements you want to change on the sticky header.

Best Regards

[Author]

Posts