Header on Eleven40-Pro Covering Page Text?

[KenTheriot]

When the browser size gets smaller on my site, the responsive theme (Eleven40-Pro) obviously changes things around. But when the browser size gets down to about 1010 wide, the header background expands vertically and covers up my page text and image. It should, I imagine, push that content down below the header, but clearly it doesn't.

Can anyone clue me in on why this is happening?

Here is what the site looks like at full size: http://screencast.com/t/LKkD3LgZ

Here it is at 1010: http://screencast.com/t/LKkD3LgZ

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

Thanks!

Ken

[AnitaC]

You have minify turned on so I cannot see your code in Firebug, but look down in the media queries and you need to add a top margin in the .content area. Use Firebug and the mobile response tester and you should be able to target it. But I can't since minify is turned on.

---

Need help with customization or troubleshooting? Reach out to me.

[KenTheriot]

Thanks Anita,

I'll turn it off and check that stuff now.

Cheers!

[update] I failed:-P. I tried adding both a top margin and a top border to .content (in style.css) and neither did the trick. I did try clearing caches and checking in another browser. No dice. What do you think?

Thanks!

Ken

[Tom]

The problem seems to stem from your addition of the utility-bar div above the header. Find the media query for 1023px in your stylesheet and make the following changes:

Change line 1634

    .site-inner {
        margin-top: 120px;       /* correct from 0px  to suit */
    }

Addition at line 1707:

    .site-header .title-area {
       background: url(http://www.homebrewaudio.com/wp-content/uploads/2013/08/HBA-Logo-Eleven40-Pro-web.jpg) no-repeat center !important;
    }

---

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

[KenTheriot]

Thanks Tom. That worked! Woohoo!!

Appreciate it:).

Ken

[Author]

Posts