Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Pro Header – Won't Center
Tagged: header, minimum pro theme
- This topic has 32 replies, 3 voices, and was last updated 9 years, 5 months ago by
SociallyExceptional.
-
AuthorPosts
-
December 9, 2013 at 9:16 pm #77951
SociallyExceptional
ParticipantHello,
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/December 10, 2013 at 12:45 am #77993nutsandbolts
MemberHow 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+December 10, 2013 at 7:43 am #78028Sridhar Katakam
ParticipantDecember 10, 2013 at 8:44 pm #78233SociallyExceptional
ParticipantHI 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!
December 10, 2013 at 8:57 pm #78241SociallyExceptional
ParticipantOk. 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?
December 10, 2013 at 9:00 pm #78242nutsandbolts
MemberOkay, 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+December 10, 2013 at 9:07 pm #78246SociallyExceptional
ParticipantHmm. Nope...now it isn't showing at all. ... left site up so you can view it
December 10, 2013 at 9:10 pm #78248nutsandbolts
MemberIt'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+December 10, 2013 at 9:16 pm #78249nutsandbolts
MemberI 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+December 10, 2013 at 9:23 pm #78251SociallyExceptional
ParticipantYes, as a matter of fact, the WP Cache is active. I will deactivate it..
December 10, 2013 at 9:27 pm #78253SociallyExceptional
ParticipantOk, 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...
December 10, 2013 at 9:28 pm #78255SociallyExceptional
ParticipantDo I need to move the code to the .site-header area below on the code?
December 10, 2013 at 9:30 pm #78256SociallyExceptional
ParticipantALso, 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
December 10, 2013 at 9:32 pm #78257nutsandbolts
MemberOkay, 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+December 10, 2013 at 9:42 pm #78259SociallyExceptional
ParticipantOk, 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
December 10, 2013 at 9:43 pm #78260nutsandbolts
MemberLooks 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+December 10, 2013 at 9:51 pm #78262SociallyExceptional
ParticipantThere 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
December 11, 2013 at 5:02 pm #78435SociallyExceptional
ParticipantHi 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?December 11, 2013 at 5:03 pm #78437nutsandbolts
MemberIt 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+December 11, 2013 at 6:41 pm #78458SociallyExceptional
ParticipantOk, I have placed in the original stylesheet and functions
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.