Home › Forums › WoodMart support forum › Header Builder – setting background color for sticky menu

Header Builder – setting background color for sticky menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 11, 2023 at 5:30 pm #520528

    darryl
    Participant

    Hi,

    I would like to create an overlay header with light text that switches to a white background dark text sticky menu.

    When I select overlay menu with light text, the sticky menu defaults to near black background with white text.

    If I set the section background color to white, that overrides the transparency when its overlayed and the section background is always white.

    Is there a way to have a light text overlay menu switch to a white background dark text sticky menu.

    Thanks!
    DSM

    December 12, 2023 at 12:44 pm #520814

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    body .whb-sticked .whb-general-header {
    background-color:black;
}

    Change the color as per your need.

    Best Regards

    December 13, 2023 at 12:29 am #521056

    darryl
    Participant

    That worked, Thanks.

    I also want to change the color of the sticky menu font to black (to go with the Beige) independent of the light or dark text setting that is used when the menu is transparent.

    I tried adding…

    body .whb-sticked .whb-general-header {
    background-color:#F2EDE9;
    color:#000000;
    }

    But it did not work so clearly I am missing a designator or something.

    Can you also provide a solution to this!

    Thanks,
    DSM.

    December 13, 2023 at 1:21 pm #521209

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    
body .whb-sticked .wd-nav[class*="wd-style-"]>li.current-menu-item>a, 
body .whb-sticked .wd-nav[class*="wd-style-"]>li.wd-active > a, 
body .whb-sticked .wd-nav[class*="wd-style-"]>li.active> a {
    color: blue;

    Best Regards.

    December 13, 2023 at 5:16 pm #521334

    darryl
    Participant

    Hi, that did not work for me. My custom css now looks like…

    body .whb-sticked .whb-general-header {
    background-color:#F2EDE9;
    }

    body .whb-sticked .wd-nav[class*=”wd-style-“]>li.current-menu-item>a,
    body .whb-sticked .wd-nav[class*=”wd-style-“]>li.wd-active > a, body .whb-sticked .wd-nav[class*=”wd-style-“]>li.active> a {
    color: #000000;
    }

    Can you let me know what I did incorrectly please.
    Thanks,
    DSM

    December 14, 2023 at 9:18 am #521472

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the WP admin login details of your site so I will check and give you a possible solution?

    Best Regards.

    December 14, 2023 at 5:26 pm #521701

    darryl
    Participant

    Credentials Provided. Thanks for the help.

    December 15, 2023 at 7:55 pm #522091

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try to use the below custom CSS code and paste it to Theme Options >> Custom Code >> CSS code section:

    .page-id-16813 .wd-nav[class*="wd-style-"]>li>a {
    color: #333;
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)