The header looks broken in certain resolutions in the tools app, we want to fix this independent of
the number of items we may have in the menu.
Also, we want to make it look more like the header from Discourse, so we have the same style across all our apps.
Notes
One approach for the responsive menu items is to move items to the More dropdown as the screen gets smaller, until we change it to mobile.
from #188 (Mobile header menu button is a different size when open causing the header to jiggle when toggled between the two states)
This should be fixed by making the hamburger menu icon smaller to match the size of the X. In any case, there should be no horizontal movement in the header when toggling between the two states (nor should the login button be cut off the side of the screen)
Tasks
[ ] Create a spec with the solution
[ ] Implement the solution
[ ] Test in different browsers and mobile devices
Acceptance criteria
The header is responsive and works in both desktop and mobile
The header icons and avatar look more like the ones from the community
The header looks broken in certain resolutions in the tools app, we want to fix this independent of the number of items we may have in the menu.
Also, we want to make it look more like the header from Discourse, so we have the same style across all our apps.
Notes
One approach for the responsive menu items is to move items to the More dropdown as the screen gets smaller, until we change it to mobile.
from #188 (Mobile header menu button is a different size when open causing the header to jiggle when toggled between the two states)
This should be fixed by making the hamburger menu icon smaller to match the size of the
X. In any case, there should be no horizontal movement in the header when toggling between the two states (nor should the login button be cut off the side of the screen)Tasks
Acceptance criteria