[kpreece1985]

The clean business pro themes comes with a default transparent menu/title background color. I changed it to see what a different color would look like but i would like it back at transparent. It is not allowing me to set it as transparent again. Could i get some help on this issue?

[Mahesh]

@kpreece1985: Please post in your site url.

Regards,
Mahesh

[kpreece1985]

standingpinehealthclinic.com

Thanks Mahesh!
– Kayla

[Mahesh]

@kpreece1985: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

#masthead {
    background-color: rgba(214, 214, 214, 0.5);
}

Regards,
Mahesh

[kpreece1985]

Thanks so much! It looks like the menu background is remaining a funny color. How can I change that to transparent? again, the website is standingpinehealthclinic.com
– Kayla

[Mahesh]

@kpreece1985: Please add the following CSS:

#mainnav {
    background-color: transparent;
}

Regards,
Mahesh

[kpreece1985]

Thanks Mahesh! The menu background is now the same as the header!

Now, however, when I scroll down to look at content on the page, the transparent header and transparent menu that remain constant at the top of the screen and you can see words/images/etc by the header and menu and it no longer looks professional. It looks like on the Clean Business Pro Demo, as soon as the header/menu leaves the header image, it goes to solid black.

I would either like the header to go to solid black like the demo (when it leaves the header image) or to not remain on the page as I scroll down the site.

Are either of these an option? If so, how can I do it?
Thanks- Kayla

[Mahesh]

@kpreece1985: For solid black background for fixed header, add the following CSS:

#masthead.float-header {
    background-color: rgba(0, 0, 0, 1);
}
  
#masthead.float-header .site-title a, 
#masthead.float-header .site-description, 
#masthead.float-header #mainnav ul li a {
    color: rgb(255, 255, 255);
}

Regards,
Mahesh

[kpreece1985]

Thanks for your thoughts. That code changes my masthead to be solid. I wanted transparent. How can I have the masthead not float?
– kayla

[Mahesh]

@kpreece1985: Thought you want to have the masthead to be solid as it float, just as in demo.
For avoiding masthead to float, add the following CSS:

.site-header.fixed {
    position: absolute;
}

Regards,
Mahesh

[kpreece1985]

Hi Mahesh-

I was wanting my masthead to float but when I put in the code, it changed the transparency of the masthead so I changed my mind so I could simplify things. Sorry for confusion!

I looked at my site on my smartphone (samsung galaxy S6) and then menu was overlapping the slider words. Wondering what I can do to remedy this. Put the Slider words lower on the screen perhaps? Any thoughts would be great.

-Thanks-Kayla

[Mahesh]

@kpreece198: Please add the following CSS:

@media screen and (max-width: 991px) {
	#slideshow .slide-inner {
		margin-top: 150px;
	}
}

Let me know if any problem.

Regards,
Mahesh

[Author]

Posts