How To Remove Transparency In Header

  • Unknown's avatar
    mkenny400 · Member ·

    On my website http://www.MauriceKenny.com my header used to be all white, but I used Custom CSS to try to make it grey #565656. For some reason as a example when your at the top of the page the header is grey, but you can transparently see the origional white color in the background. Do you know how this can become a solid grey?

    Can you help?

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    If I view your site I see a solid grey bar as the header. I don’t see any white background like you’re describing.

    If you’re still seeing it, can you please let me know what browser you’re using, and also please take a screen shot and upload it to your site’s media library at https://mauricekenny.com/wp-admin/media-new.php so I can see?

    Also note that your Business Plan gives you access to live chat support for help with issues like this, so you don’t need to post in the forums where you might have to wait a while for an answer. You can access live chat via the help icon that appears bottom-right on all the My Sites pages, or via this link:

    https://wordpress.com/help/contact

  • Unknown's avatar
    mkenny400 · Member ·

    Hey,

    So I contacted live chat support and they provided the CSS code to make the header a grey #565656, but that was only for the laptop view. From a mobile view perspective it is still white so could you provide any CSS to change the view in mobile to that #565656?

    Also, even though I have the business plan 1/3 of the time they do not help me with CSS modifications since they say “their is a limit” on how much CSS code they can help. The other 2/3 of the times if I message I can get someone to just help out out, but no one is able to help with this unfortunately so I am looking here for help which takes a while.

  • Unknown's avatar
    charleybea · Member ·

    Hello @mkenny400,

    I happened to see your request for mobile help and would be happy to extend some help.

    Try this code (it targets the mobile menu specifically): 

    @media only screen and (max-width: 991px) {
.mobile_header .logo_wrapper {
background: #565656;
}
}

    NOTE: I noticed that when you scroll down on desktop/laptop, the fixed menu changes back to white background. You may want to update with this code as well:

    body.sticky_menu.header_style_2 #header .header_top.affix, body.sticky_menu.header_style_6 #header .header_top.affix {
background: #565656;
}

    That should work. I hope this helps! Let us know if you need further assistance.

  • Unknown's avatar
    mkenny400 · Member ·

    Thanks that worked!

    I actually have 1 more request from a mobile perspective that I didn’t see originally due to the color. On the mobile view their are 3 little lines that I can click to drop down the menu to show “home, speaking topics, review, and etc”. For some reason it is a dark blue instead of white. So can you help to change this to white?

  • Unknown's avatar
    charleybea · Member ·

    Sure :)

    Try this: 

    @media only screen and (max-width: 991px) {
#menu_toggle button, #menu_toggle button:before, #menu_toggle button:after {
background: #fff;
}
}

    That should work. Let me know how it goes!

  • Unknown's avatar
    mkenny400 · Member ·

    Thanks so much! It worked

  • Unknown's avatar
    charleybea · Member ·

    Awesome – you’re welcome! Glad I could help :)

  • The topic ‘How To Remove Transparency In Header’ is closed to new replies.