Our site header was previosly static. This meant it stayed at the top of the web page as the user scrolled down. We decided we wanted to change that, making it 'sticky', so that it followed the user as they scrolled, giving them access to the header anywhere on the page. What started off as a small project ended up changing several times until we got to the final product of a scrolling header with an animated navigation section.
Stage 1 – scrolling header
We already had the scrolling sticky header functionality in place on our WordPress Blogs. Our former web supporter Rosie has previously discussed the development process in our Remodelling the blog header blog post. We began taking the existing WordPress CSS and Javascript, tweaking it slightly, and implementing it into our Lens design system. It took a while to gain stakeholder approval and implementation was then delayed due to the prioritisation of more important features, but we eventually launched our first iteration in September 2022.
Navigating the bugs
There were a few bugs we picked up in the review phase of this project.
On our publishing platform, Typecase, we use sticky banners to inform the user they are viewing an unpublished page or using our training and staging platforms. Our new scrolling header was hiding these banners when the user scrolled down, confusing our content creators who could not easily differentiate between live pages and unpublished pages. We were able to fix this by implementing a few lines of JavaScript on non-production pages which detected the height of the preview banners and offset them from the header. The info stripes were something we constantly had to consider when developing the scrolling navigation as both components need to appear at the top of the page. This is important as we must make sure our Typecase preview, staging, and training all mirror the live website.
A second issue arose where the sticky header would cover up section titles when an anchor link was visited. This issue was confusing as users wouldn't be sure they were viewing the correct paragraphs. The in-page navigation on our course and guide pages uses anchor links, so it was important we resolved this issue. We were able to fix this using the ‘scroll-padding-top’ CSS property on the HTML attribute. The value is determined using the height of the header at each breakpoint and then calculating if any preview banners were present using JavaScript and a CSS Variable.
Stage 2 – adding the navigation section
We decided to extend the scrolling functionality to the navigation section. This wasn’t too difficult as it only involved moving the navigation section into the .header-wrapper class in our site templates. We thought the navigation section and header took up a lot of vertical space. Our UX Designer Sam created Figma prototypes demonstrating that, as the user scrolled down, the navigation section would disappear and would reappear again when you scrolled up. Once these prototypes were approved, development began.
Final stage – animating the navigation section
Developing the animated functionality on the navigation section was the most challenging part. Since the header appears on all Lens pages, there were lots of things that had to be taken into consideration. The animated navigation section was a great opportunity to put our new review and A/R checklists to the test. It meant that we were able to pick up bugs that might previously have gone unnoticed.
We had to make sure other systems using the Lens stylesheet (such as our Funnelback site search software) worked like the main website. Our School of Management templates use slightly different code than the University of Bath Lens, so there were some issues that we had to resolve because of this. Clashing functionality was another issue we encountered. Modals on Course Pages were hidden below the navigation, so we had to make sure the z-index was adjusted.
When running device testing, we encountered issues that were specific to IOS devices, such as a single white line in the navigation section. On the Android stock browser, we were able to pick up a bug with the animation not behaving as expected.
A post-launch bug
While we were able to spot most issues with our review checklist, there was one that slipped through the net and had to be resolved in the days following launch. We received a support ticket from a user who was unable to click on specific tertiary links in the mobile navigation section. We also noticed that when the navigation section was hidden, it was not possible to click on elements behind the area where the navigation section would normally be.
Tiny changes, big difference
While changes like this can seem small, they make a big difference to usability and user experience. The header appears on all pages and provides access to key links. Having a sticky header allows people to click these links without the need to scroll to the top of the page. Implementing the animated navigation section allowed us to include it with the scrolling functionality but not take up too much real estate. It took us a few iterations and the resolution of various bugs to get our header to where we wanted it, but we are happy with how it has turned out.
Respond
