What is sticky navigation?

Have you ever gone to a website and had that header bar follow you down the page as you scroll? Well that’s an example of sticky (also referred to as fixed) navigation! Sticky headers and sticky navigation can be a great asset for you to think about during your next website redesign or update. Let’s go over some pros and cons of this navigational strategy, with some examples of our client websites. 

Sticky Navigation: Pros

1. Quicker navigation

Efficient navigation is a top priority for any successful school website. Many website visitors will scan the top bar of the website to try to find the link to the information they need. Keeping that navigation with them as they scroll down the page helps make it much easier for them to move quickly throughout your website.

2. Calm website visitors

Sometimes your visitors are looking for extremely specific information that might require a few clicks to find. It can be easy for them to feel lost if they don’t have a feel for where they are on your school website. A sticky navigation can help them keep track of where they are in your site and quickly be able to fill out that admissions application form or log into a community portal.

3. Reinforce branding

If your school recently went through a rebranding process and you’re now redesigning your school website, sticky navigation can help reinforce that brand change. With your logo and color scheme constantly in view, it will help your visitors become more aware of the change. 

4. Promote calls to action

Sticky navigation can help you keep important buttons and links in your website visitor’s view. These calls to action can help your school reach its goals by being constant reminders (and links) for admissions, support, or athletics marketing efforts.

Want more feedback about your website? Request an audit. 

Sticky Navigation Cons

1. Takes up space

Even the most effectively designed sticky navigation will take up some amount of space on the screen. If implemented incorrectly, the navigation could cover too much of the screen, making it harder to read the page, especially on a mobile device. If your provider is truly committed to a responsive website design, the size of the sticky navigation will adapt to fit all device sizes. 

2. Can be distracting

Sticky navigation is a great way to bring attention to your site’s pages. However, it can start to distract from the page content if it’s not designed well. If there are too many links, bright colors, or animations, viewers' attentions will be drawn away from the website itself and get frustrated.

Client examples

Now that we’ve gone over the fundamentals, let’s look at some Finalsite clients who’ve knocked it out of the park! I'll highlight the best parts of their sticky navigation implementation on their school website.

Loomis Chaffe - Complimentary Animation

Loomis Chaffe is a great example of a school that uses an animation to engage their sticky header. The animation is elegant, compliment the overall design aesthetic of the website design. The sticky navigation then reinforces the school’s branding and color scheme. The navigation bar is the perfect size and allows the website visitor to easily view pages.

Frensham School - Top Navigation

Frensham, a boarding school in Willagong, New South Wales, keeps the five main actions on its website sticky. The link to the school's Instagram, constituent portal, contact form, search bar, and hamburger menu remain at the top of the page in a purple bar as visitors scroll down. 

Carroll School - Both Top & Side Navigation

Carroll School’s sticky navigation design make it easy for website visitors to find information quickly and easily. The school also has a few calls to action prominently (but not intrusively) displayed as sticky navigation on the left hand side. When the website visitor starts to scroll down the page, the sticky side navigation (buttons) shrinks in to so as not to cover the page content. The buttons are still easily accessible if a visitor needs to get to those pages. Also, the added animation for these buttons is a nice touch, adding some fun interactivity.

Ravenscroft - Bottom Navigation

Ravenscroft took a unique approach. Many school websites have sticky navigations that are either on the top or the side of the page. Ravenscroft decided to add a sticky navigation to the bottom of their page. Website visitors can easily navigate to pages where they can inquire, visit, apply, or give. This placement is an accessible but subtle reminder for exploring visitors of these next steps.

Tonbridge School - Calls-to-Action

Tonbridge School, an English boys boarding school, keeps its focus on prospective families with a sticky call-to-action for “arrange a visit.” Even as prospects look through each panel of the homepage, they are only one button away from entering the admissions funnel. 

Of course, the hamburger menu is also available for any visitor. Here's a glimpse of what the side menu looks like when clicked on: 

Key Takeaways

Sticky navigation can help your school website visitors quickly navigate through your website to find the content that they need. They can also be a great tool that serves as a constant reminder for tasks you want your visitors to do (such as inquire, apply, or give). Sticky navigation can also help reinforce your school’s brand or identity if your school has recently gone through a rebranding. Ready to add sticky navigation to your school website? Let’s get started on your design!

ABOUT THE AUTHOR

Keisha is one of Finalsite's many talented web designers and front-end developers. She currently serves on the board of directors for AIGA, a professional design association. On a personal level, Keisha loves interesting fashion, traveling to new places with great art museums, and killer make-up and nail art.