Change Background Color of Top Menu Bar

modernagks · Member · Dec 10, 2016 at 5:30 pm
Copy link

Add topic to favorites
I’d like to change the background color of the top menu bar while leaving the main page background white. Is that possible?

The blog I need help with is: (visible only to logged in users)
eallas · Member · Dec 12, 2016 at 3:12 pm
Copy link
Hi modernagks! This is definitely possible!

It seems the theme you’re using defines the top menu bar as “.site-header-wrapper” located in the style sheet with id “all-css-4-1”.

The coding looks like this:
```
.site-header-wrapper {
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
```
All you’ll need to do is add the background-color style into the end of the code. It should look like this:

.site-header-wrapper {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
z-index: 1;
background-color: color(either a #000000 or color name like red);
}

I’ve put the change in bold so you can see where it would go. BE SURE to have the semi-color (;) at the end, it’s essential. Please let me know if you run into any issues.

To get a better understanding of how background-color works in CSS, you can learn in this link.

eallas · Member · Dec 12, 2016 at 3:14 pm

My apologies, I forgot to wrap the second code. It should look like this:

.site-header-wrapper {
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	<strong>background-color: color(either a #000000 or color name like red);</strong>
}

The topic ‘Change Background Color of Top Menu Bar’ is closed to new replies.

WordPress.com forums

Change Background Color of Top Menu Bar