Transparent header at top of home page

Shapely
1

Hello,

My site is Phreelance.co
I have read many threads pertaining to this issue but still seem to run into the problem. Id like to make the menu bar atop the page transparent as it is when you scroll down. I have changed my custom CSS & have updated my shapely.functions file in editor.

This is the custom CSS - note there are two header #masthead commands as this fixed a positioning error (without 2 and only one or 0 the page title appears too high, up in the menu

html body.custom-background,
nav#site-navigation {
background: transparent;
}
header#masthead
header#masthead {
top: 0;
width: 100%;
z-index: 999;
left: 0;
position: fixed;
right: 0;
}

Thank you!

2

Hi @phreelanceco,

I hope you are well today and thank you for your question.

It is transparent at the top of the page but there isn’t any element below it on the top of the page so you see white background color of your site body.

To change it you can change background color of your site body by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

body.custom-background {
    background: #e8e0e0 !important;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin