Hamburger menu column misalignment

AI-generated summary

The discussion revolves around two issues with the hamburger menu: misalignment of the second column and lack of background color change on hover for category links. BlackKnob reported the misalignment issue and sam acknowledged it as a problem with the core CSS. BlackKnob also pointed out the missing hover effect, which sam initially said was intentional, but later BlackKnob showed that it was inconsistent with the category list popup.

awesomerobot suggested that adding a highlight to the hamburger menu would require reworking the padding and testing for different badge types, but considered it a low priority enhancement. Instead, awesomerobot proposed revisiting the idea of a left-aligned slide-out hamburger menu, as the current design may not work well for big sites with many categories.

Johani fixed the alignment issue with a commit to the Discourse repository and thanked BlackKnob for reporting it. BlackKnob expressed interest in a native left-aligned slide-out menu, which is a possible future redesign.

I noticed that the 2nd column of categories is not aligned with the 2nd column of other text elements in the hamburger menu. Not sure which selector to look for to fix it with CSS.

4 Likes

My poor OCD, @Johani maybe have a look at fix, looks like an issue with the core CSS

5 Likes

One more thing. The category links in the hamburger menu don’t have any background color change on hover.

OCD never stops…

That is actually correct, we do not put background on categories anywhere on hover.

4 Likes

we do it in the category list popup. how is it different from the hamburger menu?

Hmmm, leaving this for @awesomerobot to decide on then…

2 Likes

Yeah, probably more consistent to add a highlight there now… padding will need to be reworked a little and it would need to be tested for the 4 category badge types (the box style will be fairly annoying there). Overall it’s a low priority enhancement…

Time might be better spent looking into ways to improve the hamburger menu entirely (revisiting some suggestions in Proposing a left-aligned slide out hamburger menu - #8 by codinghorror)? Big sites with a lot of categories are becoming more common, and I don’t feel like this works well at all for anyone…

9 Likes

Not a big problem, especially if it’s going to be redesigned.
I would love to have a native left-aligned slide out menu.

The alignment issue is fixed via:

https://github.com/discourse/discourse/commit/5ec896d163b71125fa11c7e07de6994441cd2b46

Good catch and thanks for reporting @BlackKnob

8 Likes