Minimum Pro Header – Won't Center

Community Forums Forums Design Tips and Tricks Minimum Pro Header – Won't Center

This topic is: resolved

This topic contains 32 replies, has 3 voices, and was last updated by  SociallyExceptional 11 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #77951

    SociallyExceptional
    Participant
    Post count: 57

    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/
    #77993

    nutsandbolts
    Keymaster
    Post count: 3187

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78028

    Sridhar Katakam
    Participant
    Post count: 1068
    #78233

    SociallyExceptional
    Participant
    Post count: 57

    HI Andrea! I removed the header on the home page only via here: http://www.studiopress.com/forums/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!

    #78241

    SociallyExceptional
    Participant
    Post count: 57

    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 (1600×60) 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?

    #78242

    nutsandbolts
    Keymaster
    Post count: 3187

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78246

    SociallyExceptional
    Participant
    Post count: 57

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

    #78248

    nutsandbolts
    Keymaster
    Post count: 3187

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78249

    nutsandbolts
    Keymaster
    Post count: 3187

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78251

    SociallyExceptional
    Participant
    Post count: 57

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

    #78253

    SociallyExceptional
    Participant
    Post count: 57

    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…

    #78255

    SociallyExceptional
    Participant
    Post count: 57

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

    #78256

    SociallyExceptional
    Participant
    Post count: 57

    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

    #78257

    nutsandbolts
    Keymaster
    Post count: 3187

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78259

    SociallyExceptional
    Participant
    Post count: 57

    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

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.