Laying out Header Bar

HTML & CSS
1

Recently I added the ability to filter and sort Member Comments on Articles for my website.

The problem is that I don’t have enough space to fit everything into the “header bar”, and I could use some advice on how to make things work?! :eek:

Here is a screenshot of how things look now…

While I might be able to get by with how things are laid out currently, the moment the pagination goes to “double-digits”, it will force the Nav Bar onto a new line for lack of space.

So it seems like my only option is to go on ahead and do this by design. But I fear doing so will make my Header Bar to “bulky”… :frowning:

(I have a similar design on my Subsection page, but there the page is wider, so space isn’t an issue.)

Not sure what to do… :-/

Sincerely,

Debbie

2

There a lots of options here:

  1. Pagination
  • you could limit the number of links and provide simple controls if a page number isn’t in the current visible group. eg

First | Previous | 5 | 6 | 7 | Next | Last

  • you could use a select element to use to navigate between pages, not 100% user friendly though

  1. Provide just key navigational links and have a “Show more” option for other items, when clicked this would reveal/toggle extra options

  2. There’s nothing wrong with providing navigation tools on more than one line, look at the top of these forums, you have 3 different navigation sections

  3. Ask yourself if you’re actually trying to offer too many options. Quite often it’s all to easy to add this sort of stuff, most of which will probably be little used. A good rule of thumb I haven’t seen mentioned much recently is KISS - Keep It Simple Stupid :slight_smile:

3

I think my Nav Bar is pretty simple as is, so shaving it down more is not a good idea to me.

Looking at my screenshot…

Maybe I could leave the “Filter by” and “Sort by” in the shaded box, and place the Navigation Bar on top of it, and to the right?

I agree, but I don’t think anything I’m trying to do is superfluous.

Obviously people need a way to go between pages, and I think at the least, sorting would be handy for users who want to see the conversation from Oldest-to-Newest or Newest-to-Oldest, or by “Most Popular”, etc.

The filtering is maybe not so necessary, but if I can keep Filtering, Sorting, and Navigation, then that would be best! :slight_smile:

So how do I do that and not make my Header gigantic?

Sincerely,

Debbie

4

Another idea would be to move the pagination to the bottom of the page so that fits with expected behaviour and reading habits, eg scroll down as you read, reach the bottom, click for next page scroll down, read…etc

There’s really no one answer or perfect solution to this. Perhaps have a look at what similar sites are doing to get some ideas?

5

I do have a Nav Bar at the page bottom, but was told on SP before that it is better to have it at the top and the bottom.

Here is another screenshot of what I’m facing…

Unfortunately, the Dropdowns and Nav Bar are too wide to fit on one, line, yet on their own lines they look a bit awkward also, because they only fill a small portion of the respective lines.

In this latest screenshot, I purposely moved the Nav Bar to its own line above the shaded line holding the Dropdowns, but it stands out like a soar thumb to me.

Any suggestions of how to fix this annoying dilemma?

Also, in a worst-case scenario, how bad would it be if I made things look like the first screenshot, and then if there are more than like 9 pages of comments - which is unlikely - just let the Nav Bar be forced onto a new line and leave it as is??

Sincerely,

Debbie

6