Header Transparency


#1

I am wanting to have my header background bar be 100% opaque (no transparency). I cannot seem to figure out how to do this. Also, is there a way to have the header bar stay at the top, not just appear when scrolling down?


#2

Hi,

Please post a link to your website, so I can give you a working solution.

Best Regards,
Csaba


#3

Hi Csaba,

Thank you for looking into this for me. Here is the website:
http://newsite2017.cheremosh.ca/

Regards,
Shayne


#4

Hi,

You can make your header background transparent with this Custom CSS:

.site-header {
    background-color: transparent !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba


#5

Hi Csaba,
thank you for the reply, however, I am looking to make the site headeer Opaque (NOT transparent). This css makes it 100% transparent. Also, I have delete the code, updated the CSS and it won’t go back to the original setting of semi-transparent??

How can I make the site header 100% NON transparent or opaque?

Regards,
Shayne


#6

Hi,

Ok, sorry you can make the background a solid color using this Custom CSS:

.site-header {
    background-color: red !important;
}

Please let me know how it works.

Best Regards,
Csaba


#7

Hi, I have tried using solutions I have seen in other posts and none has worked.

1- I need to make the desktop menu white at all times without affecting the header image and have it disappear whenver the clt stops scrolling down so as not to overlap with the content. It did this before and now it doesnt. It just sticks there.
2- I need to change the width of the menu for the mobile version and
3- change the color of the 3 little lines of the menu icon for mobile as they are white and do not show with a white background.

Can you pls help me? My site is www.inversa.uy

Thanks


#8

Hi flodmeina_r. I don’t know the answer to your first two questions, but ran into the same problem you had in your 3rd point. You can adjust the colour of the mobile “little lines” in the customizer. You can access this option by navigating to Apperance>Customize>Colors>Header ------>Scroll down to the bottom and there is an option to change the “mobile menu button”.

Hope that helps with your 3rd issue !

Regards,
Shayne


#9

Hi @flomedina_r,

Please open a new topic, so we can help you there.

@shayne-billey - have you tried the Custom CSS I gave you in my previous post, how it worked for you? Do you still need help regarding this topic? Please let me know.

Best Regards,
Csaba


#10

Hi Csaba,
Thank you for the CSS code. Worked Great!! I just changed the colour from red to white as that was the look I was going for in the header. Easy fix :slight_smile:

Thanks again!
Shayne


#11

Thanks Shayne!!! :slight_smile:


#12

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba


#13

Hi,
I tried:
.site-header i:after {background-color : rgba(255,255,255,0.2) !important;
}
and
.site-header {
background-color: transparent !important;
}

What am I doing wrong?