Menu not displaying on mobile for Headers UI components

[lgaspari]

Hey there! I'm new to Mantine and I was looking for a way to make my application's header, so I went right into https://ui.mantine.dev/category/headers.

The problem here is that even though the layout is responsive, the menu is not. For instance, if we look at https://ui.mantine.dev/component/header-menu-colored we can see that when narrowing the window the burger menu is displayed, but upon clicking it does nothing (see video below). Is this behavior intentional to keep it short? Otherwise, how could I display the menu on mobile?

Does anyone have a clue on that? I'm thinking that a <Menu> should do the trick, but would be nice to have that as part of the responsive example. Thanks!

Screen.Recording.2022-11-02.at.14.35.18.mov

[rtivital]

We provide only one fully responsive header – https://ui.mantine.dev/component/header-responsive
You can use it as reference and build your components based on it

[lgaspari]

We provide only one fully responsive header – https://ui.mantine.dev/component/header-responsive You can use it as reference and build your components based on it

Hi @rtivital — Amazing, I wouldn't have found it by myself, thanks!

One side note though, IMO it would be nice to have this header example either at the top of the page or described in a way people could find it easier since it's right in the middle. Moreover, all headers are tagged as "responsive" but that one you sent is the only one that has "Responsive" on their name, so it feels a bit confusing.

I'm going to close this issue as it was resolved, but feel free to reopen if needed.

[danmaz74]

@rtivital finding about the special importance of header-responsive is very difficult; a suggestion would be to add this information to the comments in the other examples. I was really confused until I found out about this. I could create a MR with this info added if you'd like to.