Support/Ultra Theme/Transparent Main Menu Over Image

[Resolved] Transparent Main Menu Over Image

Tagged: 

  • Author
    Posts
  • December 18, 2018 at 7:59 pm #11170

    Karen
    Participant

    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

    December 19, 2018 at 5:11 am #11171

    Andrew Misplon
    Keymaster

    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.

    December 19, 2018 at 10:31 am #11172

    Karen
    Participant

    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;
	}
}
    December 19, 2018 at 11:01 am #11174

    Karen
    Participant

    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

    December 19, 2018 at 11:10 am #11177

    Andrew Misplon
    Keymaster

    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

    December 19, 2018 at 11:20 am #11178

    Karen
    Participant

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

    December 19, 2018 at 12:17 pm #11181

    Andrew Misplon
    Keymaster

    Super 🙂 Glad that helped.

    All the best.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top