Log in Get SwiftGrid →
Resolved

Transparent Main Menu Over Image

Ultra Theme started by Karen Dec 18, 2018 6 replies
Karen Dec 18, 2018 · 7:59 pm #11170

Hi Andrew,

You replied to me yesterday on this (#post-11164) but asked me to start a new thread, so here it is 🙂

I’d like a transparent background on the main menu bar for a new site I am building. I’m not using any sliders, just large static images on the pages.

My client wants a homepage like this one: https://bit.ly/2A4Dz5s and my dev site is here: http://wordpress.karendgroves.com/.

Is this option available in the premium version or will it need to be fixed via CSS?

Thanks, Karen

Andrew Misplon Puro Dec 19, 2018 · 5:11 am #11171

Hi Karen

Here is a place to start from:

@media (min-width: 1024px) {
	.home .site-header {
		background: rgba(255, 255, 255, 0);
		color: #fff;
		margin-bottom: -112px;
	}

	.home .site-header .site-branding h1.site-title {
		color: #fff;
	}

	.home .main-navigation a {
		color: #fff;
	}
}

Further changes will probably be needed but hopefully this helps you get going.

Karen Dec 19, 2018 · 10:31 am #11172

Hi Andrew

That worked perfectly, thanks! I made a small tweak to get it to apply to all pages (removed .home), which seems to work ok.

@media (min-width: 1024px) {
	.site-header {
		background: rgba(255, 255, 255, 0);
		color: #fff;
		margin-bottom: -112px;
	}

	.site-header .site-branding h1.site-title {
		color: #fff;
	}

	.main-navigation a:link,
	.main-navigation a:active,
	.main-navigation a:visited,
	.main-navigation a:hover 
	{
		color: #fff;
	}
}
Karen Dec 19, 2018 · 11:01 am #11174

Quick follow up question.

How do I find out the page name, so for example, in your original CSS, the class was

    .home

If I want to make this kind of change to a single interior page, called Bookings for example how do I isolate the page name/class? I was testing this on another site for a page that is not the homepage. For example, this age: http://www.emmahollandmountaintraining.co.uk/outdoor-coaching/

Thanks, Karen

Andrew Misplon Puro Dec 19, 2018 · 11:10 am #11177

Hi, sure it’s in the body tag of the page. Right click and inspect and then check the body tag, it’ll be something like .page-id-x

Karen Dec 19, 2018 · 11:20 am #11178

Ah, found it. Thanks for the fast response. Brilliant support Andrew!

Andrew Misplon Puro Dec 19, 2018 · 12:17 pm #11181

Super 🙂 Glad that helped.

All the best.

7 posts