Shrink your publication’s header for better branding throughout your site

The New Yorker is doing it, the New York Times is doing it, you can do it… and it’s pretty easy.

Here’s how:

Step 1: Reduce your header logo size

Readers don’t care about your logo… really. It is important they know who is producing content, but how hard is it for them to figure that out? Not very.

Now how important is it to make navigating your site easy? Yep very.

Step 2: Reduce your navigation button size and make the logo and navigation stick to the top of every page… even when readers scroll down

Your logo is part of your brand and your navigating experience contributes to your brand… so why not give readers both a better experience and the opportunity to show off your logo all the time? Pretty sweet combo and it’s easy to do.

Yes that’s right, get your logo and navigation buttons to display on your site, all the time, regardless of what part of an article a reader is viewing.


1. Home page header before scrolling

Home page header before scrolling
Home page header before scrolling

2. Page header shrinks up after scrolling down

Header after scrolling down - now your reader gets the logo and navigation
Header after scrolling down – now your reader gets the logo and navigation

Go check it out to see how it works (keep an eye on the header area when you scroll).

Your site

Consider your current header. What does it look like? Does it run an ad banner at the top and come with your logo and navigation? If so that is ok for the moment. But what happens when readers scroll down? Your header disappears.

Make your logo and navigation shrink and stick to the top of the page (thank you Chris Knowles at WPMU for the how to) as readers scroll down.

Check out how a few major publishers handle sticking their headers:

  • The New Yorker (not in FireFox though)
  • New York Times Ditches their logo entirely and shrinks the navigation when you scroll down
  • Digiday Removes the top ad and sticks the navigation buttons
  • DailyDot Makes their logo and navigation permanently sticky
  • Vice Permanently slim and sticky header

Although phones need their own responsive layout, these slimmer approaches work well on tablet and desktop screens. It’s is a much better reading experience and you get to show off your logo all the time.

P.S. In case you were interested this site runs off the Parallax Pro theme from StudioPress and the sticky header comes with the theme.


Get our free guidebook:

The publisher's Subscription Acceleratorâ„¢ guidebook

Ready to grow your subscriptions?