Categories
Theme Development

Making the twentythirteen header responsive

The twentythirteen theme worked well for a couple recent projects, but the header is huge and not responsive. It looks good on big monitors, but the header is too large on my laptop, and then it gets hidden altogether when the screen gets just a bit smaller.  Here is one way to make it responsive.

NOTE: I made a child theme for twentythirteen, and then performed the following steps.

First, I don’t want the header image to be changed by the user, so I disable the custom header image in functions.php.

Then, since I am using a static home page, I don’t need the <h1> and <h2> tags in header.php. I delete those lines of code and replace them with an <img> statement that uses the header image I want.

While I’m in header.php, I remove the class=”home-link” from the site-header <a> tag. The styling rules for home-link are part of the problem.

Then I add a few styling rules in style.css:

.site-header { max-width: 100%;}

That makes the header image responsive. But the navbar is stuck in the same place and the header pulls away from it when you re-size the screen!

.navbar { position: relative; max-width: 100%;}

Boom!

Now my header shrinks along with the window, and the navbar stays with it.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Help thwart spambots * Time limit is exhausted. Please reload CAPTCHA.