Change Menu Colors for Image Header Type Only


#1

Hello there,

I have my site at www.devanyanne.com and I have the Image Header setting selected under Customize/Header Area/Header Type.

I changed the CSS to have a white background and not the dark background that is on by default. My menu text is black with the yellowish hover. However, when there is an image in the background it’s really hard to see the menu text in the yellowish :hover color.

Is there a CSS class or ID that I can call to for just the menu/header when it’s the transparent header for the full size image? Then when the user scrolls down it goes back to how it is setup now?

Thank so much,
Lorne


#2

Hello Lorne,

Try to use this selector: #masthead:not(.header-scrolled)

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

Kind Regards, Roman.


#3

Thanks for the reply Roman,

I tried this and it didn’t work?

#masthead:not(.header-scrolled):hover {
	color: white;
	background-color: #fcd088
}

I also have this code to change the menu, would this impact it at all?

/* Menu First level */
.main-navigation ul ul {
  background-color: white;
}

#mainnav .sub-menu { 
	color: white;}

#mainnav .sub-menu li a {
  color: black;
	  border-top: 1px solid whitesmoke;
	  border-bottom: 1px solid whitesmoke;
}

#mainnav .sub-menu li a:hover {
  color: #fcd088;
	border-top: 1px solid #fcd088;
	border-bottom: 1px solid #fcd088;
}  

/* Menu Second level */
#mainnav .sub-menu .sub-menu li a {
  background-color: white;
  color: black;
	border-top: 1px solid whitesmoke;
	border-bottom: 1px solid whitesmoke;
}  

#mainnav .sub-menu .sub-menu li a:hover {
  background-color: white;
	color: #fcd088;
	border-top: 1px solid #fcd088;
	border-bottom: 1px solid #fcd088;
}  

/* Menu Third level */
#mainnav .sub-menu .sub-menu .sub-menu li a {
  background-color: white;
  color: black;
	border-top: 1px solid whitesmoke;
	border-bottom: 1px solid whitesmoke;
}  

#mainnav .sub-menu .sub-menu .sub-menu li a:hover {
  background-color: white;
	color: #fcd088;
	border-top: 1px solid #fcd088;
	border-bottom: 1px solid #fcd088;
}  

.btn-menu {
	color: black;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#mainnav-mobi,
#mainnav-mobi ul.sub-menu {
  background-color: white;
	border-top: 1px solid whitesmoke;
	border-bottom: 1px solid whitesmoke;
}

#mainnav-mobi a:hover {
  background-color: white;
	color: #fcd088;
	border-top: 1px solid #fcd088;
	border-bottom: 1px solid #fcd088;
}

Thanks for the help! I am so close to making this live for my wife!
Lorne


#4

Nevermind, I figured it out. Your code worked! I was missing my a before :hover.

Thanks,
Lorne


#5

Great! You are welcome Lorne :slight_smile:

Kind Regards, Roman.


closed #6