When a Site Navigation Gets Long

Last week, a client asked for some help adding a new link to their site. The problem they were having, was that their main navigation was now being broken into two lines. Not only did it not look great from a visual standpoint, it was also a little goofy to navigate through. That’s a common problem we’ve seen with several clients over the year. Either too many pages are added or the pages names get to be too long. There are a couple of options that can be explored when this happens, each with its own benefits.

Creating drop downs

One of the easiest ways to handle a navigation that is getting too long, is to add in drop downs. Often times, you’ll find that certain pages just sort of “go together,” and those pages could easily be grouped together in a drop down menu option. For example, if you had a link for Regular Menu, Healthy Menu Options, Gluten Free Menu, and Low Calorie Menu, those could all easily be grouped together under an new (and shorter) main menu heading of Menu. When a user hovers over Menu they’d see all four options and be able to select the page they are looking for.

Creating top navigation

Another option, one that you might need to contact your web designer for help with possibly, is to a create a second navigation. A very common and effective layout that is used on sites is to have the logo in the very top left corner, with a tagline or call to action feature in the top left, with the main navigation then in a line under that. If your site is laid out similar to this, you can create a new, second, and likely smaller navigation bar across the very top of the website (above the logo and tagline). In this sidebar, you can move links for pages such as Home, About Us, Contact Us, and social media links. Doing this will likely free up a fair amount of valuable space for other, more crucial pages.

Decreasing font size

A third option that can be explored, though one that should be used very carefully, is to decrease the font size in the navigation bar and decrease the space between links. With this approach, you’ll definitely want to work with your web designer, because they will need to update the CSS file and they’ll know just how small the text can safely be and how close links can be without causing issues for users. There have been times we have used this approach, but normally only when there is one word that is getting knocked down to a second line. If there are several lines, we will select one of the first two options.

The main navigation of your website is the easiest and main way for many users of your site to go from page to page and explore the site and content, and eventually make a conversion – be it making a purchase or filling out a contact form. The sites main navigation should be given plenty of consideration, especially as the site grows and new pages are added, thus making the navigation bigger. It’s by no means a reason to not put a new page on your site, just might require some additional thought as to where the new link will be placed and how it will impact the main navigation overall.

ready to discover how we can help make your website and marketing more successful?

Gray bar Contact Us