46

As I write this, Stack Overflow and SO Meta seem to have a navbar height of 60px, Stack Exchange Meta seems to have a navbar height of 40px, and other Stack Exchange sites (Law, Electrical Engineering) seem to have a navbar height of 34px.

I am in the process of creating a website that has a navbar, and I'm curious to know how Stack Overflow came to decide that 60px was the right number (i.e. what factors were considered when arriving at that decision).


It has been suggested that this question is opinion-based. At the moment, I don't believe it is. I am not asking users of Stack Overflow for their guesses at how the navbar height was decided, and I have been flagging all such comments on this question.

I suspect this is a question that can only be answered by a current or former engineer / PM / designer at Stack Overflow.

13
  • 9
    Personally, I prefer to be ale to set my own height and have it the same across all SE sites: Top-navigation choices
    – Makyen Mod
    Commented Oct 9, 2017 at 3:16
  • 9
    See How Stack Overflow Redesigned the Top Navigation and also the Top Navigation Update Meta post
    – Dhaust
    Commented Oct 9, 2017 at 4:03
  • 103
    If you decide on a really tall navbar, don't forget to make it sticky as well. People love that!
    – Keiwan
    Commented Oct 9, 2017 at 7:32
  • 59
    They went to: random.org and typed in the values 30 & 60, then clicked "generate", hence the range of values you see.
    – Tanner
    Commented Oct 9, 2017 at 9:06
  • 4
    I wouldn't be surprised if it was just based on icon size + sufficient padding space. Commented Oct 9, 2017 at 14:31
  • 1
    I noticed this some time ago. Different heights, I assumed its to fit the logo of each site :)
    – CodeSmith
    Commented Oct 9, 2017 at 14:32
  • 10
    With a laptop of res 1366x768, I find 60px to be far too large and on top of that, it's sticky, and then the review banner/button section/"Question" or "Answer" header of reviews, I only have half a screen to review with. SE's use of vertical real estate truly is a bane for laptop users on low-res screens Commented Oct 9, 2017 at 16:47
  • 9
    @NickA There is an option to disable the "stickiness" of the navbar in the options section of your profile page. Commented Oct 9, 2017 at 17:19
  • 1
    @AndrewMorton ahah, that solves 1 problem, now I just need a way to configure it on a system basis instead of a user basis for when I'm at work Commented Oct 9, 2017 at 17:26
  • 1
    It looks too fat to me.
    – a06e
    Commented Oct 9, 2017 at 22:27
  • 4
    While the header element may be 60 pixels, the topbar itself is only 57 as 3 have been used for the nice dark border on top.
    – Travis J
    Commented Oct 9, 2017 at 23:03
  • I don't know how the Stack Overflow engineers went about it, but I either play around with it in a mockup until I have something that works and looks good; that hasn't changed since the inception of the web. You know a logo and probably some input controls need to fit in there so you know or can measure the minimum height and can then move from there. More likely in this day and age however I would download Bootstrap or a similar CSS kickstart kit, set up a navbar using it and then do the least amount of CSS overrides as possible to suit my needs.
    – Gimby
    Commented Oct 10, 2017 at 12:16
  • 5
    @becko that's what happens with too many hamburger menus. Commented Oct 10, 2017 at 14:49

0

You must log in to answer this question.

Browse other questions tagged .