Minimum Pro Header – Won't Center

[SociallyExceptional]

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;
}

[SociallyExceptional]

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?

[nutsandbolts]

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

[nutsandbolts]

Actually - try this:

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

and take the bottom border off .site-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]

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;
    }

}

---

Genesis Tutorials | Follow me on Twitter

[SociallyExceptional]

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!

[nutsandbolts]

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

[SociallyExceptional]

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!

[SociallyExceptional]

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?

[nutsandbolts]

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

[SociallyExceptional]

Ok, am I adding this to each .wrap? There's about 8 places where that shows up - but nothing specific in the header area. Just wanting to make sure I place correctly!

[nutsandbolts]

It's the first one under the Site Containers heading in your stylesheet. Right now it looks like this:

.wrap {
margin: 0 auto;
max-width: 1140px;
}

---

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

[SociallyExceptional]

Thank you Andrea! Here's to hoping no more logo changes..... 🙂

[Author]

Posts