Changing the Color of Header Bar

Tagged: background, color, header, scroll, widget

This topic has 5 replies, 2 voices, and was last updated 7 years, 5 months ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 10, 2017 at 8:23 pm #21852
shanessa2
Customer
Hello! I was wondering if anyone knew how to change the color of the header bar either when it is at the top of the page or after scrolled? Thanks!
August 10, 2017 at 8:49 pm #21853
shanessa2
Customer
Also, is there a way to change the background color of a widget, or add a translucent box behind the text in the widget?
August 12, 2017 at 3:12 am #21857
Wes
Moderator
You can change the Header background color by looking in your style.css for this (around line 1119 by default) –
```
.site-header {
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
```
Here is the code that activates Header Background when scrolling down –
```
.site-header.light {
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	padding-top: 0;
}
```
Homepage widget background colors: Which widget are you trying to change? Each widget is either based on a background image or a solid background color by default. So if you can let me know which widget area you want to change exactly, then I can give you the code to change it. For example, here’s how you can change the 1st background widget color –
```
.front-page-1 .image-section {
	background-color: #ff0000;
}
```
That will work on most of the widgets with a background image by default, but a widget like .front-page-4 has a solid background color and we’d need to use something like this to change it –
```
.front-page-4 .solid-section {
	background-color: #ff0000;
}
```
It depends which one you want to change.

Let me know if that helps.
August 12, 2017 at 3:35 am #21859
shanessa2
Customer
This reply has been marked as private.
August 12, 2017 at 3:45 am #21860
shanessa2
Customer
Also, the original question about the widget background color is in regards to the text not being visible with a busy background image – for instance the “Transformative Solutions” text on the home page. Was wondering if there’s any way to put a semi-transparent background behind that text. Thanks again!
August 13, 2017 at 6:38 pm #21861
Wes
Moderator
The header background on the homepage is actually transparent, and then it changes to white when scrolling down. It looks like it’s black because your image in the background is black. If you want the header background to be a solid color (rather than transparent) and stay that color consistently when scrolling down then you can adjust the parts I mentioned above. You can also change or remove the transparent part of the code in your css (line 1144) –
```
.featured-section .site-header {
	background-color: transparent;
	border:  none;
}
```
If you want the header to be a specific color and it’s not working, just let me know. I can help get it fixed instantly.

*********************************************************************

When the browser is in Mobile/Responsive mode, the Nav is set to white on line 2691 –
```
	.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}
```
The submenu color is also currently set to white, you can change it on line 1313 –
```
.genesis-nav-menu .sub-menu a {
	background-color: #222;
	color: #fff;
	padding: 20px;
	position: relative;
	width: 200px;
}
```
Some of this is due to the default CSS in the theme. I’ll get this fixed and added to the list of updates to get released this week.

Until then, just let me know what color you want your header to be if you’re having trouble getting it working. In the future it’s going to one solid color throughout the theme rather than black on the homepage and white on the others (referring to the mobile nav section)
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.