How to make 2 items in primary navigation more prominent than the others

Question

I'm working on the redesign of an existing website. The website currently has a main navbar consisting of 8 items. The content structure (the 8 main links/categories) should be preserved in the new design; however, two of the items should be made much more prominent than the others.

Most of the solutions that I could come up with revolve around having two navigation menus, one with the important items and one with the others. I thought of putting them one above the other, with the important items being larger, like this:

# # F I R S T # #    # # S E C O N D # #
--third-- --fourth-- --fifth-- --sixth--

Or, I could have the important links visible in the page header, while the other items could be always collapsed in a popup menu.

I'm not happy with either solution. The second one in particular would effectively hide some navigation options, and I'd rather avoid that, at least on large screens.

I would like to find a solution that allows me to change the "two more prominent items" to "three more prominent items" in the future, with as little trouble as possible.

What is a sensible way to make certain items of the main navigation bar more prominent/highlighted than the others?

Answer 1

It's OK to make some elements in your nav bigger and designed with more weight.

Also consider making your most-prominent links into buttons that sit apart from the other items.

An example of this is "Visit" and "Virtual Tour" on https://www.arizona.edu/.

Another example: Visit / Apply / Give on http://www.ucla.edu/

Answer 2

If you're building a horizontal Menu like this random page Blizzard, you can do the same.

Force your prominent items to stand on the left hand side next to the logo with bigger and bolder font, and the default items on the right hand side with default font.

I would suggest to use just one menu for this purpose. That's better from an accessibility point of view and makes it easier to morph into a mobile menu. (Or even better, if you think mobile first, the opposite way)

Maybe you'll use WordPress, than you can very easy add classes to your menu items via the customizer.

Update

I've sketched you another idea.

On the left you see a horizontal scrolling menu. All items in a row with enough space to breathe. Your prominent items are always visible and all other items are hidden depending to the viewport. The user can scroll to the right to access the hidden items.

The concept on the right has the same idea, but instead of scrolling the hidden items are behind the "more" option, accessible via hover.

Both solutions would enable you to drop the typical hamburger menu for mobile devices. Instead, the menu is handling everything in a nice fluid way.

The left solution is described in an article by Steve McKinney with some nice examples.