Altitude pro – Making navigation visible

[pinkdaisy]

Hi,
I need some help here.
I have customized the site with the altitude pro theme.
How do I make the navigation bar more visible with the image I use? It doesn't have to change colors when you hover over the text.
How and where can I change the text color and the color of the navigation of the frontpage so the naigation stands out?

the website is jazzinicholas dot com

Thanks for the help. Pinkdaisy

http://jazzinicholas.com

[SavvyJackie]

Hi,
You can style the navigation menu from you style.css file. The section Site Navigation will let you adjust the font color and weight:

.genesis-nav-menu a {
	color: #000;  < -- changed to black
	display: block;
	font-size: 14px;
	font-weight: 800;  <-- increased font weight 
	letter-spacing: 1px;
	padding: 30px 15px;
	text-transform: uppercase;
}

add this below that code to change the menu text color to white on the dark background

.dark .genesis-nav-menu a {
   color: #fff; 
	
}

This is just a suggestion so you style the default menu bar differently than the .dark menu bar.

Cheers,

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[MoodyRiviera]

One other suggestion: Emulate the demo site (and other sites I've seen using the Altitude Pro theme) by using a graphic that has some "darkness" near the top of the image so that the white text will show up better.

*MoodyRiviera*

[pinkdaisy]

Thanks! It works out just fine!
Pinkdaisy

[SavvyJackie]

Glad to hear it. I took a look and still see an issue when you scroll up and the menu background is dark. Looks like you did not add the second bit of code as suggested - you have an extra close bracket there instead.

.dark .genesis-nav-menu a {
   color: #fff; 
	
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts