How To Change Color Of Menu Bar (Altitude Pro Theme)?

[Fabian182]

Hello,

how can I change the color from the menu bar from black to white?

How can I also change the color of the menu point´s and the title?

http://www.directupload.net/file/d/3924/w24ukvec_png.htm

Many thanks 🙂

http://www.farbentour.de/

[Tonya]

Hello,

Let's walk through each step.

1) The color of header area (which is the container for both the site title and primary navbar) is set in the stylesheet on lines 108 & 117:

.site-header {
	background-color: #fff; /* currently #000; */
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.featured-section .site-header {
	background-color: #fff; /* currently #000; */
}

To change these to white, simply change #000 to #fff, as shown.

2) The site title is current forced to white on line 964. Simple change #fff !important to #000 (or whatever color you want):

.site-title a,
.site-title a:hover {
	color: #000; /* currently set to #fff !important; */
}

3) Now for the primary navbar menu items. Add the following styling. Notice that it is targeting the .nav-primary

.nav-primary .genesis-nav-menu a {
    color: #000;
}

.nav-primary .genesis-nav-menu a:hover {
    color: red; /* whatever color you want here */
}

If you only want to have these changes affect the .featured-section page, you add body.featured-section to each of the styles above to target only that page.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[gpriver]

Hi Tonya, I was able to change the color of the menu bar with your code, but when the site loads it starts out transparent until you scroll. Now the transparent menu bar is gone.

Thanks!

[Author]

Posts