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 10 years, 3 months ago by SociallyExceptional.
-
AuthorPosts
-
December 9, 2013 at 9:16 pm #77951SociallyExceptionalParticipant
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/December 10, 2013 at 12:45 am #77993nutsandboltsMemberHow 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 KatakamParticipantDecember 10, 2013 at 8:44 pm #78233SociallyExceptionalParticipantHI 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 #78241SociallyExceptionalParticipantOk. 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 #78242nutsandboltsMemberOkay, 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 #78246SociallyExceptionalParticipantHmm. Nope...now it isn't showing at all. ... left site up so you can view it
December 10, 2013 at 9:10 pm #78248nutsandboltsMemberIt'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 #78249nutsandboltsMemberI 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 #78251SociallyExceptionalParticipantYes, as a matter of fact, the WP Cache is active. I will deactivate it..
December 10, 2013 at 9:27 pm #78253SociallyExceptionalParticipantOk, 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 #78255SociallyExceptionalParticipantDo I need to move the code to the .site-header area below on the code?
December 10, 2013 at 9:30 pm #78256SociallyExceptionalParticipantALso, 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 #78257nutsandboltsMemberOkay, 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 #78259SociallyExceptionalParticipantOk, 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 #78260nutsandboltsMemberLooks 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 #78262SociallyExceptionalParticipantThere 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 #78435SociallyExceptionalParticipantHi 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 #78437nutsandboltsMemberIt 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 #78458SociallyExceptionalParticipantOk, I have placed in the original stylesheet and functions
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.