Sticky Navigation Enhancement

When the redesigned was initially launched there were no sticky navigation elements. Below is a GIF that recreates what the site looked like when it was release in May of 2017.

We decided to tackle this problem in phases. First we made the main navigation sticky when the user scrolled.

But I wanted to spend some time on the secondary navigation. I felt we needed to also make the subnav stick to the top of the page to allow the user to quickly navigate between sections of the product. So, I started working on how we could accomplish this.

Some things I had to keep in mind:

  • The contact information on the right would need to remain prominent and easy to access.
  • Sometimes we use this same area to the right to show the agent’s photo and contact information. So the new design would need to support this functionality.
  • I wanted to avoid hiding navigation items as much as possible.

Some of my initial ideas:

Exploration for the sticky subnav.

While I liked the idea of keeping the contact buttons exposed on the mobile device I knew we would run into a problem because of state regulation. In some states we are not allowed to call our agents “agents”. So there was a potential for “Contact an Authorized Representative” to be the CTA so we would run out of real estate quickly.

Ultimately I came up with the following design and worked with a developer to get it built.

You can see the GIFs below.

Or see it live on


My Role on this project

Visual Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tyson D. Reeder

Tyson D. Reeder

Senior UX Designer (Visual) at Mutual of Omaha

More from Medium

Design for Understanding — SAT Scores

nav — An HCI Case Study: Part II

Why should design system be valued?

Deciphering the myth of design systems