EDIT Dec 4 - We're doing it live! Please post bugs or concerns as questions tagged [top-bar]

We have rolled out our 95% completed top bar for feedback.


  • We are still adding a few final features, so if you have a request for a feature that is not there you might hold off on that for a day or two
  • Yes, the bar is black1. Also give that a day or two to sink in.

I also want to specifically address the meta/main/chat links.

I'm very aware that many of you like having the links at the top of the page and that this new version is different.

The thought process behind moving these links is that the "site switcher" should be an automatic place to go when you are on a site and want to go to another one. If you haven't already developed the muscle memory for these links, getting between them required a bit of a cognitive load: You must first decide that you want to switch sites and then you have to decide which area to go to to switch.

Also, we find that less familiar users aren't entirely clear what a standalone link that says "main" or "meta" actually does... Not to mention that it hurts my UX sensibilities that we are dynamically changing links in an element that should be fixed.

It is true that we have added a click in the process, but we have also removed a lot of clicks for other common actions that are much more frequent than switching between main and meta.

All I ask is that you give it a few days and see if the new "switch sites at the top left" paradigm grows on you.

What do you think?

1. Jin points out that technically it's not quite black.

  • 60
    Little bit of a shock initially :-). Nov 14, 2013 at 22:32
  • 25
    Where's the hot questions?
    – Mysticial
    Nov 14, 2013 at 22:33
  • 13
    Inbox is missing a tooltip; I assume that's coming? Nov 14, 2013 at 22:35
  • 15
    I.. I... I am in love with it. thank you Nov 14, 2013 at 22:37
  • 17
    nvm, found it. Boy is that dark... it's like a shadow of a shadow.
    – user102937
    Nov 14, 2013 at 22:40
  • 12
    That is an envelope? I thought it was a headset at first :P
    – Travis J
    Nov 14, 2013 at 22:40
  • 11
    @TravisJ you're both wrong, it's actually a literal inbox in perspective. Nov 14, 2013 at 22:41
  • 24
    On a whole, this is awesome! Thanks, Jeremy/Jin/Laura! Nov 14, 2013 at 22:48
  • 8
    It's pretty sleek but it would be nice if you could filter on achievement types, badges get drowned in rep Nov 14, 2013 at 22:55
  • 10
    Fix to the list of sites is good, but only 4 of them? I would like at least ten before it switches to the alphabetical order remainders. Or probably "everything over 200" like the rep graph does. Nov 14, 2013 at 23:10
  • 33
    I'd prefer my username make a comeback and replace the teeny tiny gravatar. You can't really see the image very well anyway.
    – WendiKidd
    Nov 14, 2013 at 23:19
  • 27
    Wait, will this be (off-)black on every site? Even established sites whose color schemes were carefully decided upon long ago and for which a black bar is quite jarring?
    – user206562
    Nov 15, 2013 at 0:06
  • 9
    I liked the older, cleaner one.
    – user228266
    Nov 15, 2013 at 5:34
  • 14
    Can we make it a little less-black to match the overall theme of MSO?
    – Rahul
    Nov 15, 2013 at 6:36
  • 14
    Is top bar color configurable ?? if not then please change its color to lighter side not this dark .. it is very hard to see the icons in the back color
    – Dhaval
    Nov 15, 2013 at 8:56

64 Answers 64

1 2

Please add the name of the current site to the bar. I would suggest that it be added at the front of the bar, but it could also make sense after the StackExchange dropdown.

enter image description here

This is because moving to a meta site or a chat site is such a jarring experience.

I'm embarrassed to admit how long it took me to realize that the "meta" link changed to "main" in the current incarnation of the bar as a way to get back to the main site. For months I was hitting the back button 10 times or going to my bookmarks to get back to the main site. The same is true for chat for me. The logo for the main site is placed and sized differently enough that it took me a long time to figure out that it was clickable.

The Stack Exchange drop down is a vast improvement over the current implementation in this. At least you have to click in the same place to back out of meta as you did to get into it. But it doesn't seem to go quite far enough.

Having a consistent clickable logo icon for the site (main, meta, and chat) would make navigating within that site much smoother.

  • Three down votes and no comments? Nov 20, 2013 at 19:52
  • I think people are taking this as being a bit more "electiony" that a normal Q&A, but I was against this because (a) it looks kindof horrible and (b) it repeats information that is perhaps a centimetre below it Nov 20, 2013 at 20:07
  • On the main site it would repeat the information, but not on meta and chat, which is where I would find that information most useful. As for looks, its just a mockup, I'm not a designer. Nov 20, 2013 at 20:15
  • Ah, I thought your meta vs main in your mockup was a mistake, I consider them to be seperate sites. So the functionality you want back is the main link back. I'm on the fence with putting "main/meta" back in but having 3 different site names (Meta Stack Overflow, Stack Overflow and Stack exchange) next to each other like that isn't a plesent solution Nov 20, 2013 at 20:21
  • I almost want the "main" link back. Certainly from meta that is part of the intention. I really want meta and chat to be considered part of the main site and an easy and consistent way to get "home" to the main site from whatever part if it you are in. I have hated the "main" link in the current bar. It took me forever to realize it was even there. Nov 20, 2013 at 20:27
  • I think thats the thing though, the designers don't consider main/meta/chat/careers to be the same site. They consider them seperate sibling sites Nov 20, 2013 at 20:29

Is there any reason for the empty space between the badges and review, and between help and the search bar?


I don't think the space is needed, specially since the rest is closely packed.

Notifications, inbox, and Stack Exchange button have a gap of just approximately four pixels between them.

  • 6
    They're seperate groupings on two levels (ThingsOnLeft || ThingsOnRight(Achievements||Links||Search)) Nov 16, 2013 at 13:04
  • 1
    I find it a bit much - I don't actually think it's that bad an idea to reduce it slightly. Nov 17, 2013 at 14:00

Add a shadow to avoid going from white to black in 0 pixels difference:

Enter image description here

  • 2
    Does it need a shadow? Is there anything wrong with it going from (almost but technically not) black to white immediately? (our text does that, our buttons do that on either side, the Questions / etc links at the top go from dark grey to white immediately, etc) Nov 15, 2013 at 0:04
  • 1
    it needs it more than it doesn't, just the bar, I am not a fan of dropping shadows everywhere. I wouldn't even add shadows to the current buttons (but someone did, and you don't hear me complaining about it)
    – ajax333221
    Nov 15, 2013 at 1:07
  • 1
    But why? For what reason should there be a shadow? Nov 15, 2013 at 1:24
  • hard to tell, but not harder than to tell why there shouldn't be one
    – ajax333221
    Nov 15, 2013 at 1:52
  • 1
    There shouldn't be one because it's unnecessary and unnecessary visual elements add clutter and noise to a layout. The same reason the top bar doesn't have much else in the way of stylistic elements. Necessary, useful visual elements are good, but they're only useful if there's a point to them existing. Nov 15, 2013 at 3:15
  • 18
    sorry, what can be asserted without reasoning can be dismissed without reasoning.
    – Jin
    Nov 15, 2013 at 4:04

Since this is a new roll-out top bar... I would love if this bar survives scroll. Something like Google+ does.

Enter image description here

The main advantage here is I can access my new top bar even when I look at the last question.

  • 17
    No no no no no no! Nov 15, 2013 at 16:29
  • 3
    It's hard to put into words but these always make me feel detached from the website, like I'm not in full control (also; they always seem to go wrong and have a second of flicker on old system, although im sure the competent people at stack exchange could avoid that) Nov 15, 2013 at 16:32
  • 1
    @RichardTingle I like sticky toolbars. If the official one settles to being static, I will probably add a userstyle Nov 15, 2013 at 17:44
  • 4
    This is an old request: Should the top navigation be frozen? (see also the linked questions). And the answer's NO.
    – jscs
    Nov 15, 2013 at 20:26
  • 2
    you can write your own user script in few lines to achieve that
    – ajax333221
    Nov 17, 2013 at 5:12
  • If you were to make a userscript for this, it could even have a "dock/"undock" toggle so that it would either stick or not.
    – Travis J
    Nov 18, 2013 at 19:31
  • For example (top right dot is the toggle): $('.topbar').css({zIndex:10,position:"relative",top:0,left:0}); var ol = $("<div>"); ol.css({position:"fixed",zIndex:5,top:"10px",width:"7px",height:"7px",borderRadius:"5px",right:"2px",cursor:"pointer",paddingRight:"2.5px",backgroundColor:"black"}); $("body").append(ol); var pos = false; ol.click(function(){ pos = !pos; var t = $(this); if( pos ){ $('.topbar').css("position","fixed"); t.css({zIndex:15,backgroundColor:"#fff"}); }else{ $('.topbar').css("position","relative"); t.css({zIndex:5,backgroundColor:"#000"}); } });
    – Travis J
    Nov 18, 2013 at 20:33
1 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .