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
Navigating the bugs
There were a few bugs we picked up in the review phase of this project.
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.