Remodelling the blog header

We had commissioned an agency to create a theme for our WordPress blog site a few years back. Since then, we'd made quite a lot of changes to the branding on our main website www.bath.ac.uk. We wanted to bring the blog header in-line with our main header so that users have a more consistent user journey.

The brief

• Rearrange the existing header elements
• Add additional behaviour so that the header shrinks and swaps the logo when the user scrolls

Challenges

Our main website is a bespoke build, so aligning existing features with WordPress structure and functionality was not totally straightforward.

There was some existing shrinking and swapping functionality in the old site, using a library called Waypoints. When I tried to repurpose this, the logo swap would get confused and if you scrolled too quickly, it would assign the wrong one. It also introduced a bug that caused the header to flicker.

As the library's last update was in 2016, we couldn't securely rely on its future compatibility even if we resolved the current bugs. So it was time to seek an alternative rather than spend time on something which would need to be replaced later on.

Research and discovery

I did some research into similar functionality, looking at resources on sites such as MDN Web Docs, CSS-Tricks and CodePen. I also looked at forum discussions to see if I could try to avoid problems that others had encountered.

I tried a few methods, but settled on using JavaScript to swap out the classes on scroll. I used CSS to refine the transitions and improve the functionality so that the change was not jarring.

Different stages of the process

• The original header
• Phase 1
• Phase 2

The original header

The original blog header

The original blog header placed the logo underneath the global navigation. This seems odd placement as the user has to look down the page to have it confirmed that it is an official University of Bath site.

We wanted our logo to be the first thing that users see when they visit any of our blog pages, which is consistent with other content. By repeating the same look and feel we increase the user's confidence in our brand.

Phase 1

Adding the swap on scroll behaviour

The first step was to relocate the logo and resize the header. There was a lot of pixel pushing involved in getting everything to measure up, as well as changing the $global-width.

I also changed the behaviour of the search tray, so that it was open on medium breakpoint up.

Phase 2

The new blog header after scrolling

After doing some research, I decided to add and remove classes on scroll. Because I'd been trying to repurpose what had been previously used, I ended up having to restructure elements in order to get it working smoothly.

There are some tidy-up tasks I need to do, because changing the global site width has had some knock-on effects as you'd expect. But all in all, it was an interesting project and it's always good to see something you worked on in action.