Center Header in Mocha Theme

[liannef]

Hi There!

I installed the plugin for a custom header - now I am having a hard time getting it to center on the page. Any help would be greatly appreciated

http://www.themakeupgirl.net

Thanks!

http://www.themakeupgirl.net

[nutsandbolts]

Try adding this to your stylesheet:

.custom-header #header {
        background-position: center !important;
}

That works for me in Firebug but it may not work on the actual site - if it doesn't, post back here and let me know and we'll try something else.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[liannef]

Hi Andrea!

Thanks for the help! That didn't work for me... 🙁

Here is the current header script and the header is aligning left....

#header {
	background: #322620 url; 	
	margin: 0 auto; 	
	min-height: 155px; 	
	overflow: hidden; 
	width: 100%;
}

[nutsandbolts]

Can you put the rule back in place and save so I can see what's happening when it's there?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[liannef]

Done - code back in

[nutsandbolts]

Okay, looks like your rule is nested inside another rule, which is why the site goes wonky when it's in place.

Right now you have this:

#header {
	background: #322620 url; 	
	margin: 0 auto; 	
	min-height: 155px; 	
	overflow: hidden; 
	width: 100%;
   	.custom-header #header {
        background-position: center !important;
}

Take all that out and paste this in:

#header {
	background: #322620; 	
	margin: 0 auto; 	
	min-height: 155px; 	
	overflow: hidden; 
	width: 100%;
}

.custom-header #header {
        background-position: center !important;
}

I still don't know if it will work - which plugin did you use for the header?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[liannef]

Genesis simple headers is the plugin I used....

[nutsandbolts]

It actually might be easier to do this without the plugin. Try deactivating it, remove the custom header rule I had you put in before, and try this instead for the #header part of your stylesheet:

#header {
	background: url(http://themakeupgirl.net/wp-content/uploads/2013/10/TMG_Header1.jpg) center no-repeat !important; 	
	margin: 0 auto; 	
	min-height: 155px; 	
	overflow: hidden; 
	width: 100%;
}

(Be sure to grab all of that - it scrolls to the right a bit)

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[liannef]

THAT DID IT!! Thank you SO SO SO SO much Andrea!!

-Lianne

[nutsandbolts]

Woohoo! So glad it worked!

If you don't mind, please mark this topic as resolved so we'll know you've been helped. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[liannef]

DONE....thank you again!

[Author]

Posts