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 10 months ago.

Viewing 15 posts - 16 through 30 (of 33 total)
  • Author
    Posts
  • #78260

    nutsandbolts
    Moderator
    Post count: 3137

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


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

    #78262

    SociallyExceptional
    Participant
    Post count: 55

    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 1600×60 one

    #78435

    SociallyExceptional
    Participant
    Post count: 55

    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?

    #78437

    nutsandbolts
    Moderator
    Post count: 3137

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

    #78458

    SociallyExceptional
    Participant
    Post count: 55

    Ok, I have placed in the original stylesheet and functions

    #78721

    SociallyExceptional
    Participant
    Post count: 55

    I think we’re making progress! I added the code under the .site-header area in the original stylesheet and it is going all the way across and centered! The simple social icons are in the way now, but I can move those to a different widget area if I need to. AND everything is viewing correct in FF, IE, and Chrome (I havent checked Safari yet).

    I am now going to add the code for removing the header from the home page only and see what that does:
    `.home .site-header {
    display: none !important;
    }

    #78722

    SociallyExceptional
    Participant
    Post count: 55

    Ok, the header is gone on the home page and seems to be viewing ok in all browsers on this end…

    If I remove the header widget area, will that remove all the blank space between the header and the menu bar?

    #78723

    nutsandbolts
    Moderator
    Post count: 3137

    Actually it looks like .site-tagline is doing it – but if you try to remove it completely, the nav disappears (which is really bizarre.

    I was able to get it close by changing .site-tagline to this:

    .site-tagline {
    margin-top: 40px;
    margin-top: 4rem;
    }

    There’s still a small gap… Looking to try to find it.


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

    #78724

    nutsandbolts
    Moderator
    Post count: 3137

    Actually – try this:

    .site-tagline {
    margin-top: 30px;
    margin-top: 3rem;
    }

    and take the bottom border off .site-header.


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

    #78725

    Sridhar Katakam
    Participant
    Post count: 1048

    If I may butt in again..

    .site-tagline {
        display: none;
    }
    
    @media only screen and (min-width: 1024px) {
    
        .nav-primary {
            margin-top: 37px;
            margin-top: 3.7rem;
        }
    
    }

    #78734

    SociallyExceptional
    Participant
    Post count: 55

    Ok Great! I wasn’t able to get any changes to show using the first code, Andrea, but Sridhar’s worked nicely.

    This is definitely much better!

    #78735

    nutsandbolts
    Moderator
    Post count: 3137

    Fantastic! I’m glad you got it working. Sridhar is a miracle worker – so thankful he’s part of the Genesis community!


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

    #78743

    SociallyExceptional
    Participant
    Post count: 55

    I cannot thank both of you enough for your patience and help with this specific matter. You both deserve both thumbs up! Thank you for assisting with this!

    #79967

    SociallyExceptional
    Participant
    Post count: 55

    Ha! Don’t we all wish I wasn’t re-opening this!? Ok..

    Of course they have changed their logo, so no big deal. I went in and replaced the url on the .site-header to reflect the updated image. I even went back to the original specs for the .site-tagline, so that there would be more space for the header to show. However, this brought back space below the header, but the header is not showing up in it’s full height (250). I didn’t change anything inside the functions since we didn’t need to last time.

    I did change the height to 250 under the .header-image .site-title a { just to see if that would make a difference but didn’t.

    Any ideas?

    #80041

    nutsandbolts
    Moderator
    Post count: 3137

    I was able to get the whole thing showing (though not perfectly) by adding height: 200px; to #site-header and min-height: 60px; to .wrap – try that and see if it works for you.


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

Viewing 15 posts - 16 through 30 (of 33 total)

You must be logged in to reply to this topic.