I am aware that Monica Cellio suggested the Top(bar) Hat. When compared with the current actual top bar, the icon positions of achievements and review are interchanged. Even in Monica Cellio's suggested image, it was in the correct order.

Were the icon positions changed purposely or is there any other reason behind that?

Screenshot showing the actual top bar and top bar hat:

Top bar hat

  • 6
    The initials are (I)nbox, (Q)ueues, (A)chievements and (L)ist. So "IQAL" -> Equal. It is a subliminal message about tolerance, reminding users that everybody is equal. – SPArchaeologist Dec 12 '18 at 16:17

I did the opposite of @WELZ; I made a userscript which reorders the top bar icons so that they match the positions on the hat:

enter image description here

// ==UserScript==
// @name        Stack Exchange Top Bar Winter Bash 2018 edition
// @namespace   https://github.com/Glorfindel83/
// @description Reorders top bar items to match the order on the Top(bar) Hat 
// @author      Glorfindel
// @version     0.1
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @match       *://*.serverfault.com/*
// @match       *://*.askubuntu.com/*
// @match       *://*.stackapps.com/*
// @exclude     *://api.stackexchange.com/*
// @exclude     *://blog.*.com/*
// @exclude     *://chat.*.com/*
// @exclude     *://data.stackexchange.com/*
// @exclude     *://elections.stackexchange.com/*
// @exclude     *://openid.stackexchange.com/*
// @exclude     *://stackexchange.com/*
// @grant       none
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

(function () {
  "use strict";


  // The Winter Bash icon is loaded asynchronously
  waitForKeyElements("li.-item", function(jNode) {
    if (jNode.next().hasClass("site-switcher-item") &&
        !jNode.children().first().hasClass("js-achievements-button")) {
  • 1
    Why aren't you reading your notifications??? – WELZ Dec 14 '18 at 14:24
  • deliberately ignores this notification and fails – Glorfindel Dec 14 '18 at 14:27

I fixed up the SVG with the icons in the correct order.

Run the snippet below to view it.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" width="480">
<path fill="#294CCC" d="M126.001,138.1c-29.6-5.299-59.701-5.299-89.301,0C33.4,101.3,30.1,64.4,26.6,27.6
<path fill="#0A1C60" d="M126.001,138.1c-29.6-5.299-59.701-5.299-89.301,0c-1.1-12-2.1-24.099-3.3-36.299
<path fill="#030920" d="M35.5,126.4l1.1,11.9c29.6-5.3,59.701-5.3,89.301,0l1.099-11.9C96.9,132.5,65.7,132.5,35.5,126.4z"/>
<path fill="#294CCC" d="M3.4,125c50.6,11.5,105.201,11.5,155.799,0C159.299,160.199,3.4,160.199,3.4,125z"/>
<path fill="#FFFFFF" d="M97.601,113.8L94,117.4l-1.299-1.3c-0.3-0.3-0.701-0.3-1.001,0l-1.5,1.5c-0.299,0.3-0.299,0.7,0,1l2.001,2
	h-4.7c-0.801,0-1.4-0.599-1.4-1.399v-8.6c0-0.8,0.599-1.4,1.4-1.4h8.6c0.8,0,1.4,0.601,1.4,1.4L97.601,113.8z M94.7,113.5h-7.2v1.4
	h7.2V113.5z M96.1,110.6h-8.6v1.4h8.6V110.6z M87.5,116.3v1.4h2.2v-1.4H87.5z M99,116l-5,5l-2.899-2.9l1.1-1.099L94,118.8
<path fill="#FFFFFF" d="M56.3,109.4h-7.6c-0.6,0-1.1,0.4-1.3,1l-2,6.1v3c0,0.8,0.6,1.399,1.4,1.399h11.5c0.8,0,1.4-0.599,1.4-1.399
	v-3l-2.1-6.1C57.5,109.701,56.9,109.3,56.3,109.4z M56.1,116.5l-1.4,1.4h-4.3l-1.4-1.4h-2.1l1.7-5.2c0.1-0.3,0.4-0.5,0.7-0.5h6.5
<path fill="#FFFFFF" d="M105.8,117.6c0,0.8,0.601,1.4,1.399,1.4h5.701v2.2l2.2-2.2h0.701c0.8,0,1.399-0.6,1.399-1.4v-1.4H105.7v1.4
	H105.8L105.8,117.6z M115.9,109h-8.601c-0.8,0-1.399,0.601-1.399,1.4v1.4H117.4v-1.4C117.299,109.601,116.6,109,115.9,109z
<path fill="#FFFFFF" d="M77.2,110.1v-0.7h-8.6v0.7h-2.2v2.9c0,1.1,1,2.2,2.2,2.2v0.7c0.3,1.101,2.2,1.901,3.6,2.2v1.401H70
	L77.2,110.1z M68.6,113.7c-0.4,0-0.701-0.4-0.701-0.7v-1.4H68.6V113.7z M74.6,115.5l-1.7-1.1l-1.699,1l0.7-1.901l-1.9-1.199h2.2
	l0.7-1.901l0.701,1.901h2l-1.599,1.299L74.6,115.5z M77.9,112.9c0,0.399-0.4,0.7-0.7,0.7v-2.2h0.7V112.9z"/>

Here's a PNG preview:

topbar hat fixed png

  • Since the hats are defined in the CSS, you can probably use this to provide a modified version which people can use in stylesheet managers so that the hat will be 'correct' in all places. – Glorfindel Dec 14 '18 at 8:39

Were the icon positions changed purposely or is there any other reason behind that?

Yes, there is an esoteric meaning behind the change. Also a purpose for designing the hat in that way. In fact, multiple meanings.

1. The order shows SE's preferences

The hat icons are present in this order : Inbox, Reviews, Achievement and then Hamburger.

This implies that the website prefers communication with users and are ready to listen to the feedback posted. This is a reflection of Welcome Wagon and improvement of New User experience. Could we please be a bit nicer to new users?

Then there is review icon. This represents moderators and moderation process. Moderators play a crucial role in the functioning of Stack Exchange that too voluntarily. They are given importance in designing the hat. Related Could we please be a bit nicer to moderators?

Keeping reputation after moderation implies that users should give importance to moderation over earning reputation and badges for own self.

Finally, putting Stack Exchange hamburger icon shows that they are generous and selflessness.

2. Shows they are ready for change

When the new top bar was launched, there were many requests and bugs. Many are taken into consideration and improved based on the feedback. The change i the hat design implies that there is still scope for improvement in the future.

3. Another reason (and sounds plausible)

They forgot the top bar design. The designer made the hat with one design out of hundreds of proposed designs he remembers during the discussions. The final one we have currently and the one designer remembered didn't match. Hence we have the current design. [Just for fun]

You must log in to answer this question.

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