Minimum Pro Header – Won't Center

[SociallyExceptional]

Hello,

I must be missing something quite simple here: http://taracustomhomes.com/future-homes/

The exact size of the header is specified but as you can see, the header goes clear to the right but there is white space to the left. I figure this is not due to my image size, because regardless of how much longer I make it, it still stays like this and just pushes farther to the right.

Is there something specific I need to insert to get this header to go clear from left to right across the entire site?

Thank you!

http://taracustomhomes.com/future-homes/

[nutsandbolts]

How did you add the header? I'm not seeing it in your stylesheet at all, but I also don't see it added via Appearance > Header.

---

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

[Sridhar Katakam]

See if this helps: http://sridharkatakam.com/using-custom-header-minimum-pro/

---

Genesis Tutorials | Follow me on Twitter

[SociallyExceptional]

HI Andrea! I removed the header on the home page only via here: http://www.studiopress.community/topic/remove-header-home-page-minimum-pro/ And have added it through the appearance > header area.

I will try placing the code here that Sridhar explained and keep you both posted!

[SociallyExceptional]

Ok. Unfortunately, the info Sridhar, did not work. I keep getting an error message and have to reload the original functions.php file.

Andrea - I added the header via Appearance > Header. I have changed the dimensions inside the functions.php to reflect the new size (1600x60) and in the stylesheet as well. However, what I can't figure out is why the header doesn't center over the page. Any other ideas?

[nutsandbolts]

Okay, try this. Remove the image from Appearance > Header. Find this in your stylesheet:

.header-image .site-title a {
height: 60px;
display: block;
text-indent: -9999px;
max-width: 1600px;
}

and change it to this (be sure to include the URL to the header image):

.header-image .site-title a {
background: url(http://taracustomhomes.com/URL-TO-IMAGE) center top no-repeat !important;
height: 60px;
display: block;
text-indent: -9999px;
max-width: 1600px;
}

That *should* work, but if it doesn't, leave it there and reply back so I can take a look.

---

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

[SociallyExceptional]

Hmm. Nope...now it isn't showing at all. ... left site up so you can view it

[nutsandbolts]

It's showing for me, and I can see the updates to the stylesheet, which is weird since it's not following them. Do you have Cloudflare or a caching plugin active by chance?

---

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

[nutsandbolts]

I can get it in place with Firebug if I remove the background from .header-image .site-title and use it for .site-header instead. However, it's still out of whack and it's covering the social icons:

---

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

[SociallyExceptional]

Yes, as a matter of fact, the WP Cache is active. I will deactivate it..

[SociallyExceptional]

Ok, I have deactivated the cache plugin. In Firefox, now I see the header, but it's still not centered and my menu and the social icons in the header widget area are blank white. Id attach a screen shot if I could...

[SociallyExceptional]

Do I need to move the code to the .site-header area below on the code?

[SociallyExceptional]

ALso, I think I'd be OK with the social icons in that widget area going away if they have to because I can always find another way to put those somewhere else. But I definitely would like to get the header looking better

[nutsandbolts]

Okay, remove the background rule from .header-image .site-title a and try pasting it under .site-header instead. So it will look like this:

.site-header {
background: url(http://taracustomhomes.com/wp-content/uploads/2013/12/taracustom_h4.png) center no-repeat !important;
background-color: #fff;
border-bottom: 1px solid #eee;
letter-spacing: 1px;
letter-spacing: 0.1rem;
position: fixed;
width: 100%;
z-index: 999;
}

We'll see what that does and go from there.

---

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

[SociallyExceptional]

Ok, done.

Interesting...now in Firefox, it's showing the header in both places. When I scroll, the header that's right on top of the menu stays put so the text and everything goes around it, etc.

In Chrome I only see the 1 header right above the menu.

In IE, I see the header up at the top of the page and the social icons are showing up

[nutsandbolts]

Looks like it's still uploaded under Appearance > Header.

---

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

[SociallyExceptional]

There is no header uploaded when I go in to double check under Appearance-Header.

However, I have gone ahead and deleted the smaller header versions before the 1600x60 one

[SociallyExceptional]

Hi Andrea,
I am going to put back in the original stylesheet from upload, as well as erase the header. Right now it is viewing different in every browser AND sometimes on different pages on the same browser. I am wondering if some of this is caused from the first code change I did to remove the header on the home page only?

[nutsandbolts]

It could be. Once you've done that, let's try getting the header in the right place first, then we can hide it on the homepage.

---

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

[SociallyExceptional]

Ok, I have placed in the original stylesheet and functions

[Author]

Posts