[brandtki]

Is it possible to create a solid color “bar” (let’s say black) behind the menu as the image carousel scrolls? The variation in full screen images causes the menu font to get lost. I have changed the color and size of the font, but it still tends to get lost and am thinking this is an easier remedy. I do not want a footer bar, just almost like a header bar.

[Skandha]

@brandtki: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width: 1200px) {
	#site-header-menu {
	    background-color: rgba(0,0,0,0.7);
	}	
}

You can change the opacity by changing the value 0.7.
Let me know if this works out!
Kind Regards,
Skandha

[brandtki]

This is great! Is there a way to make the width go full screen? Otherwise this is exactly what I was in search of. Genius!

[Skandha]

@brandtki: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.site-header-main .wrapper {
    max-width: 100%;
}

Let me know if this works out!
Kind Regards,
Skandha

[brandtki]

Sadly it did not. It did not look to change anything. Looking to just make the screen “wrap” tried to change the CSS min-width to 100%, but that did not work either.

[Skandha]

@brandtki: Hello there,
Please remove all the code I provided you above and add the following Code.

@media screen and (min-width: 1200px) {
	#masthead {
	    background-color: rgba(0,0,0,0.7);
	}	
}

Let me know if this what you want!
Kind Regards,
Skandha

[brandtki]

Yes! Yeah!!!!!! Thank you!

[Skandha]

@brandtki: Glad that worked out. Have a great weekend! 🙂

Kind Regards,
Skandha

[Author]

Posts