How To Add A New Yorker Style Header To Your WordPress Site
The New Yorker does it and so does The New York Times, so perhaps it’s just a Big Apple thing.
But changing and then fixing the page header as the reader scrolls up seems like an entirely sensible approach to not only maintaining branding but also to providing consistent and easy access to the primary navigation.
In this post, I’ll show you how to do the same with your WordPress site, even if you don’t live in New York.
There’s been quite a bit of coverage about the recently relaunched The New Yorker website in the WordPress community because, of course, it is powered by your favorite open-source content management system.
The design is actually quite conservative but one of the features I really like is the treatment of the header. When a page first fires up, this is what you see:
A full-header (there’s also a banner-ad above the title) with a large title and the main navigation. As the header scrolls off the top of the screen though, it changes and fixes itself to the top of the page:
The title font-size is reduced to minimize the space, a shadow border is added to give the impression that the header is sitting on top of the page and the same main navigation is easily accessible. A benefit to both the publisher (permanent branding) and the reader (easier access to the main navigation than a scroll-to-top function), it works particularly well on the longer-form pieces that both these sites regularly publish.
Adding A “Sticky” Header To Your WordPress Site
Adding the feature to your own WordPress site is relatively easy thanks to the myStickymenu plugin. However, the plugin is preset for Twenty Thirteen and just for the menu, not the whole header, so if you are using any other theme then you’ll need to make some refinements.
So, let’s walk through an example using the Bosco theme – it has a really distinctive header – to see just what needs changing. To follow along, fire up a test site, install the myStickymenu plugin (but leave the settings as they are) and the Bosco theme and let’s get started.
The default Bosco theme header looks something like this:
(I’ve made the font-size for the site-title a little larger just so that it can be made smaller later in the transition.) If you scroll down, nothing will happen as myStickymenu is looking for a specific class to get “sticky” with and it doesn’t exist in the Bosco theme, so we need to find the Bosco equivalent.
Here’s the header HTML:
Rather than just make the navigation sticky, we want to make the whole header sticky, so let’s grab the id from the header element, #masthead and head back to WordPress and the myStickmenu settings (Settings > myStickymenu) and replace .navbar with #masthead in the Sticky Class option.
Click on Save Changes, refresh your site, scroll down and you’ll soon see something like this:
A little overwhelming, so let’s start configuring and adding some custom CSS to get the effect we want. Change the options as follows:
- Sticky Background Color : #FFFFFF
- Sticky Opacity : 100
- Sticky Transition Time : 1 (a longer transition time works better)
- Make visible when scroled (sic) : 75 (this will mean that the new header will appear almost immediately after the original scrolls out of view)
- Fade or slide effect : uncheck (I prefer the fade effect)
Click on Save Changes and refresh the site again. We now have a sticky header that, at least, isn’t orange and the transition seems smoother. But it’s still too big, so let’s add custom CSS to:
- reduce the size of the site title
- hide the site description
- add a full-width shadow border to the bottom of the header
- remove excess padding
We can do this by taking advantage of the myStickymenu plugin adding a class of .myfixed to the element with id or class specified in the Sticky Class option (in our case header#masthead) when the sticky is activated. So, we just have to include .myfixed in the selectors and the styles will only be applied when the sticky is active.
That final statement for the wrapfixed class adds the shadow border. If you look at the header HTML earlier in the article you’ll see that no such class exists in the original HTML, so where did it come from?
The myStickymenu plugin actually wraps the target element in its own custom HTML (see below) and this class only gets added to the div#mysticky-nav when the scroll has taken place. This element is full-width, making it perfect for attaching the shadow effect to, and the dynamic adding of the style means that the shadow is only visible when the sticky is active.
Add the above CSS to the .myfixed css class options in the myStickymenu settings and click on Save Changes. Now when you view your site you should see something like this almost immediately after the heading scrolls out of view:
You might want to play with the options in the myStickymenu settings to get a behavior which is more to your liking. You should also now be able to make the header “sticky” in any theme; you just need to follow the steps above.
In no time you’ll be keeping your branding, giving your readers easy access to your site’s navigation and joining illustrious East Coast company.