Header on Eleven40-Pro Covering Page Text?

[KenTheriot]

My site looks great on a screen that is wide enough. But being a responsive theme (Eleven40-Pro), things adjusts with the browser size, obviously. But at a certain point in making a smaller browser size, the header background expands downward to accommodate the nav bar links, and covers up my page text and graphics in the process. How can I prevent this?

Here is an image of what the home page looks like when the width of the browser gets to about 1010 px: http://screencast.com/t/6beihiS4SiyT

Here is what it looks like at 1125: http://screencast.com/t/NZALyHJgqWF

Here is what it looks like full-size: http://screencast.com/t/LKkD3LgZ

The website URL is: http://www.homebrewaudio.com

Thanks!

Ken

http://www.homebrewaudio.com

[Tom]

I think we fixed this here: Header on Eleven40-Pro Covering Page Text?

The second code snippet should be in the media query for 1023px to center the logo. Please turn off CSS minification so we can have a proper look at the page and CSS together.

(It is working correctly in the media query at 767px:)

@media only screen and (max-width: 767px) {
    .header-image .site-header .title-area {
        background-position: center center !important;
    }
}

There are some other tweaks you can do, like, adding this for even smaller screens, similar to what was done for 1023px/tablets:

@media only screen and (max-width: 400px) {
.site-inner {
        margin-top: 180px;   
    }
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts