Changing the menu colours for a dark background


#1

Hi all,

My question isn’t a problem with Sydney Pro as such, it’s working fine.
However, I’m using dark images in my sliders and dark menu writing. I want to keep the menu writing dark so when the person scrolls, my logo appears on a light background. It’ll make sense when you see what I mean!

Can you help with creative ideas on how I can colour the banner area and menu colours so that it’s visible and looks good?

I’ve thought about trying a light shadow on the menu text but couldn’t get that to work. I tried setting the background to a lighter colour but that just didn’t look nice.

Any ideas would be appreciated :slight_smile:


#2

Hello ECMBen,

Please try to use the following CSS code, second part is to vertically align your menu.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 1025px) {
    #masthead {
        background-color: rgba(232,232,232,0.4);
    }
}

#mainnav {
    margin-top: 22px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

Hi Roman,

Thanks for you help :slight_smile:
I ended up modifying your CSS to give me something similat but a little different: https://www.ingencia.co.uk

Is it an imperitive or good practice to use @media? The tablet, mobile and desktop views appear to work OK without using the @media selector.

/* show a mastheaed before scrolling down 
Xmedia only screen and (min-width: 1025px) { 
     #masthead { 
        /* background-color: rgba(232,232,232,0.4);
         padding: 5px 0;
    } 
}
*/
/* make the banner more opaque when the user scrolls */
.site-header.float-header {
	background-color: rgba(232,232,232,0.9);
    padding: 5px 0;
}
/* make the banner opaque enough to see the menu */
/* set the site head at the top to the same padding as the floating header */
.site-header {
	background-color: rgba(232,232,232,0.3);
  	/* padding: 20px 0; */
	padding: 5px 0;
}
/*this sets the margin at the top of the page to vertically center the menu */
#mainnav { 
    margin-top: 22px; 
} 
/* this sets the margin when the user scrolls down the page */
.site-header.float-header #mainnav {
	margin-top: 0px; 
}

#4

Hello ECMBen,

Great! You can learn about CSS Media Queries here.

Please let me know if you need more help.

Kind Regards, Roman.


#5

All sorted :slight_smile:


#6

Excellent!

Have a nice day :slight_smile:

Kind Regards, Roman.