Nav bar suggestions

Get Started
1

I came up with a pretty nice top nav bar for a site, but am having issues deciding what to do with the internal sub-navigation bar.

Have a look at: http://dyi.li/2TY

I’m trying to fix the gray box containing Products, Equipment, Service.

Does anyone here have any suggestions? Right now it is pretty plain, boring and doesn’t flow well with the top nav. I want to keep it horizontal so it doesn’t take a chunk of the content area.

Thanks

2

Hi penguinator,

The Link didn’t work for me.

3

Jon,

Thanks for the reply. Sorry about that. The link must have just expired. This one should work for 20 days. I didn’t want to post a direct link.

http://dyi.li/2WB

Thanks

4

Thanks. A couple of comments:

  • You’re right, the top nav is nice!
  • In the top nav menu the order is “Service, Equipment, Products”, whereas on the sub-nav it’s “Products, Equipment, Service”. I’d make them the same

To answer the question, I don’t think you need to do much, perhaps reduce the width, center and add some rounded corners…?

For reference I applied the following to your subnav div to get that…

width: 350px;
margin-left: auto;
margin-right:auto;
border-radius: 5px;

5

Thanks for the comments. I’m more concerned that it isn’t completely obvious what the subnav is, so I’m just looking for a way to make it more clear so that it’s obvious for instance that you’re on the vending page and Products, Equipment and Service are sub sections. The site’s target audience is typically not the most tech savvy. What do you think?

6

Perhaps build the H1 into the subnav and put something like “See also:” to the left of the links?

7

I’ll play around with it. Thanks for the input

8

And H1 is a STRUCTURAL tag, a and the heaviest one at that. Do NOT use it in a navigation list. Remember, your navigation items are LIST of links not page headings.

A like the white space in your design. don’t be afraid to be elegant and minimalistic. Really the only flaw ( to it’s a biggie) is that one CANT tell is the gray box is a sub nav of something.

you really have 3 choices:

  1. make it a drop down that flows from its parent.
  2. maybe have a b/g graphic like an arrow, that points to the parent
  3. make it an 'L ’ shape… that is the links are horizontal, as you have the left edge lined up and it is directly below the parent.

Familiarity is important when it comes to nav and UX.

hope that helps