52

Update:

I'm the new product manager for the DAG team. I’m excited to announce that the top bar design that has been on Stack Overflow for several months is coming soon to the Stack Exchange network.

What took so long?

This was a big change and we really wanted to work out the kinks on Stack Overflow before we pushed to all sites in the network. For example, we recently released some changes to how the review queue menu works in order to address an overall drop in reviews since the new top bar shipped on SO (see When I look at the review icon, I see red for details). We also adjusted the location of some items, such as the help link, to address feedback.

To meet the needs of the network we needed to adjust some aspects of the design to work with the full range of sites. The design is coherent with the SO design, but isn’t exactly the same. The biggest difference is that site name and Questions/Tags/Users navigation remain below the top bar. This was needed in order to work with sites with long names and/or custom skins.

Most importantly, the site switcher and other key controls will be in the same location across the entire network

New top bar on Stackoverflow.com: New top bar on stackoverflow.com

New top bar on webapps.stackexchange.com: New top bar on webapps.stackexchange.com

New top bar on gaming.stackexchange.com: New top bar on gaming.stackexchange.com

New top bar on a beta site with a long site name: New top bar on a beta site with a long site name

New top bar for high rep member: New top bar for high rep member

New top bar for moderator: New top bar for moderator

Why change the top bar?

If this change is new to you, then check out the How Stack Overflow Redesigned the Top Navigation blog post and the meta post Has the top bar redesign met its goals? for more details.

  • 41
    ...oh. So, it's an adaptation of the new top bar that is rolling out to the other sites, not exactly the same thing, then. It's sticking with the color black, for one thing. But also, I see that the links haven't been moved into the top bar for the other sites. Why not? – Cody Gray Sep 13 '17 at 18:05
  • 186
    Can SO get a black bar back to at least keep the coloring consistent? – NathanOliver Sep 13 '17 at 18:05
  • 35
    Yeah, I read that. I didn't really understand it. "Stack Overflow" is a pretty long name, too. Not that much different from "Web Applications", and on the other sites, you don't have to worry about "Developer Jobs" taking up a bunch of room. Custom skins seems like a strange argument; part and parcel of this new top bar on Stack Overflow was a "re-skin". If the design is really so much better, why aren't other sites getting it? Conversely, if the skins used on other sites are worth keeping, why wasn't Stack Overflow allowed to keep its original skin? – Cody Gray Sep 13 '17 at 18:09
  • 9
    Are you going to deal with the achievements icon before rolling it out to other sites? – Andrew Myers Sep 13 '17 at 18:09
  • 105
    Basically, my concern is that this still doesn't achieve the network-wide consistency that I (and so many others) were eagerly awaiting. There will still be subtle UI differences to trip us up! – Cody Gray Sep 13 '17 at 18:10
  • 7
    Along with cody why can't questions, users, and tags be moved into the top bar? Those names don't change, do they? Seems like a lot of wasted space in there. – NathanOliver Sep 13 '17 at 18:10
  • 38
    Does anyone else find it ironic that the screenshots omit the Review icon, despite the Review icon being the #1 gripe? – Machavity Sep 13 '17 at 18:17
  • 13
    Obligatory. – ɥʇǝS Sep 13 '17 at 18:53
  • 11
    The Stack Exchange branding and bubble logo is still on the left, but the site switcher menu gets moved to the right? I wonder how long it will be before I quit going left. – Ben Miller Sep 14 '17 at 0:00
  • 11
    I hate to be that guy but... which is the new review queue icon? – Journeyman Geek Sep 14 '17 at 6:14
  • 8
    Oh finally, it's about time, since getting used to the new top bar on SO, not having it in other networks is simply put, annoying. Great work – Icepickle Sep 14 '17 at 8:12
  • 18
    It's not the same top bar as used on Stack Overflow and is more like a compromise between the old design and the one used on Stack Overflow. So it's not really consistent. Will Stack Overflow be updated to be more aligned with the new-new design? (eg. Questions/Tags/Users moved out of the new bar again). Also, isn't it too soon? You've done quite some things already to address issues with review, which I appreciate. However, last time I checked, problems weren't completely solved yet. – g00glen00b Sep 14 '17 at 9:35
  • 12
    @ChrisStratton Don't be ridiculous, people are using Stack Overflow just fine with the new top bar. – TylerH Sep 14 '17 at 14:45
  • 17
    I have to ask - now that Documentation is being sunsetted, is the new bar really necessary? I understand that one of its main purposes was to drive users towards Documentation. – John Gowers Sep 14 '17 at 15:54
  • 17
    I don't understand the point of having the hamburger on the right, and disabling the logo on the left. This makes absolutely no sense from a UX standpoint. Just leave the SE logo be and remove the annoying new hamburger which is not consistent with the mobile app, previous behavior or any other site or app ever where the main menu is always top left. – Sklivvz Sep 21 '17 at 19:12

35 Answers 35

6

This is a minor glitch. Sometimes as moderator I want to remind the community of the review queue length, and I can't quote an accurate number anymore. The review button on the old topbar showed the total number of questions that needed review. But the new topbar seemingly shows the number of questions remaining to review for me in each category.

For example, if there are 20 questions needing review, and I've skipped 3, the old topbar reports 20, the new topbar reports a total of 17.

  • 3
    Slightly more cumbersome, but are you doing this often enough that hitting english.stackexchange.com/review in incognito mode wouldn't work? I tend to think that only showing me the count of things I can do something about is generally better, except in this case. – Undo Sep 19 '17 at 22:29
  • 8
    The proper way to handle this is probably to create either a separate review dashboard, or add this information to /review; calculating it on every page load is neither efficient nor - if cached - likely to be accurate. – Shog9 Sep 19 '17 at 23:57
3

The spacing between the badge counters is different between MSE (top) and the site I moderate (bottom). That makes a visually very irritating experience when switching between sites. Seems to affect other mods as well.

Observed in Chrome 61.0.3163.100

Differently spaced top bar

There's a padding-left: 0; that's overriding the global 2pxon MSE where I don't have review privileges. Asking around seems that the correlation is more about review privileges than about mod stuff. (Or something else entirely.)

2

Is it possible to add dot separator for current comminity menu between help, chat and log out links:

current

to make it consistent with achivements

achievements

and review (10k+ users could place appropriate image here) menus?

Same proposal I have been already posted as answer on SO.meta before beginning of rolling out new top bar to all sites.

  • I don't necessarily disagree but, being pedantic, they're actually not in the same place in the menu - the upper grey bar. – Catija Sep 27 '17 at 20:33
  • @Catija true. But I think same separator should be good despite of slightly shifted vectically items position. More over, such items could be moved to the "CURRENT COMMUNITY" line, because you don't have same links for other than current communities in the list. – αλεχολυτ Sep 27 '17 at 20:38
2

Photo.SE has an issue where the style is messed up as a result of the new bar. It causes the image of the week to shift down several pixels and extend beyond the bottom of the heading section of the site. I'm not sure if it will be fixable before rolling out to the entire site though as I'm guessing a height difference in the bar is what is pushing it. Looks like it might also be impacting the entire header as the ask question link is a bit truncated as well.

enter image description here

  • Can you add an image? – Joe Friend Oct 2 '17 at 20:24
  • 1
    @JoeFriend I can later. At the moment I'm not on a system with an easy ability to manipulate and post the image. (Ironic I realize...) – AJ Henderson Oct 2 '17 at 20:26
  • Darn you and your fancy custom CSS! – Catija Oct 2 '17 at 23:22
0

Remove the StackExchange Image and position up the logo to that place for graduated sites


In Stack Overflow, the logo is placed on top and the Stack Exchange logo is removed from that place. Also there is no logo of the site in container part under the top bar.

enter image description here

In the demo images, there is both SE logo and the site logo is there, as pointed by Alex in the other answer.

Please remove the SE logo for graduated sites which have it's own logo and position it's logo to that place like the one appear in Stack Overflow.

enter image description here

  • 1
    Meh, this is likely to require at least a certain amount of design effort per site to make sure the site design doesn't look stupid. That scales poorly, at best. Better to just leave out the logo entirely in the top bar and leave it where it is. – Nathan Tuggy Sep 14 '17 at 7:26
  • 8
    Graduated sites have own logo, indeed. But all of them are part of Stack Exchange network, which kinda is a separate brand - and we don't want to kill it, we still want this brand to exist and make people aware of it. (And yes, Stack Overflow is special snowflake). Another thing is, lots of site skins are customized, take a look at for example Christianity – it's hard to imagine this site without logo in place where it is right now. – Paweł Sep 14 '17 at 9:35
  • 10
    @Paweł Then I suggest adding the Stack Exchange logo to Stack Overflow too. I don't really like the fact that it's not consistent since Stack Overflow has the Stack Overflow logo and other sites will have the Stack Exchange logo. – Donald Duck Sep 14 '17 at 14:32
  • 3
    This is a prime example of "click on what you don't want" - a UI habit I detest. Eg the whole site is in German, somewhere on the page is a German flag, click it to see a dropdown and change to English. In this case, clicking on the logo for the site you're on now is the way to change to another site. Not everyone find this intuitive. I certainly don't. – Kate Gregory Sep 15 '17 at 19:25
  • 2
    @Cœur I think it is supposed to be "remove" and "put here". – Paŭlo Ebermann Sep 17 '17 at 18:56
  • @KateGregory At least the flag obviously means "country" or "language" - titles are often not clickable and when they are they always link to the site's front page. – wizzwizz4 Sep 19 '17 at 7:07
  • 2
    I'm not sure why having "StackExchange" prominently on all these sites is needed when StackOverflow says neither "StackOverflow" nor "StackExchange" in its header. – Stephen Ostermiller Sep 19 '17 at 17:52
  • 1
    Today I was using a userscript that did that. It turns out that many site logos look terrible on a black background. I think SE logo + site switcher at the left end makes the most sense, and site branding when applicable (like SO) can use the right end where the site switcher is now (for non-mods). – Monica Cellio Sep 20 '17 at 1:00

You must log in to answer this question.

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