Stack Overflow
Stack Overflow

Questions tagged [hamburger-menu]

An off-screen menu activated by an icon with three horizontal lines.

A UX pattern common on mobile devices, involving a three line icon used to indicate the presence of an off-screen menu. Activating the icon shows the off-screen menu. This has been described as an anti-pattern in some circles.

Example of StackOverflow's hamburger menu:

  • Hamburger Off (menu hidden):

enter image description here

  • Hamburger On (menu visible):

enter image description here

When clicked, the top and bottom lines angle towards the opposite end and the center line becomes hidden. The Home column interface then becomes visible.

Hamburger Menu UX Discussion

730 questions
4
votes
1 answer

Ionic 3: Menutoggle keeps getting hidden

I have implemented a hamburgermenu in Ionic 3, but I am facing an issue. When I run the application on my Android device the hamburgermenu keeps disappearing i.e. the button to open the side menu is gone. However, it only happens sometimes. I tried…
Bab
  • 433
  • 5
  • 12
4
votes
1 answer

Designing a Hamburger menu in WPF with Mahapps.Metro

Currently, I'm using a Grid of Buttons for housing keys for navigation. It's hideous, but gets the job done. Here's the XAML chunk:
4
votes
2 answers

WPF Mahapps - How to hide a tab within Hamburger Menu collection?

Note: I'm using MVVM Light Toolkit and MahApps.Metro So I have a HamburgerMenu control within my application, it contains a HamburgerMenuImageItems within HamburgerMenuItemCollection. What I'd like to do is to hide one item and show another…
TheITDejan
  • 808
  • 9
  • 27
4
votes
1 answer

How to use DrawerLayoutAndroid component for building drawer in react-native apps?

I am new to react native and I am trying to build hamburger drawer to assist in navigation. But I could not find proper documentation. I found one but it was with redux so I let it go. Can anybody guide me how to create drawerlayout for react-native…
atif
  • 759
  • 4
  • 13
  • 25
4
votes
2 answers

How to make an element with opacity 0 unclickable

I know a similar question like this exists here: CSS3 Element with Opacity:0 (invisible) responds to mouse events but this question is different. I'm trying to implement a hamburger navigation menu for mobile devices using jQuery, CSS as…
Akhoy
  • 502
  • 1
  • 13
  • 24
4
votes
4 answers

Grey page content when side menu is opened

If you look at all the Google apps when you open the side (hamburger) menu the content of the app is greyed. Here is an example Is it possible to do this with ion-side-menu in ionic framework? If so, how? Thank you.
Marius Bancila
  • 16,053
  • 9
  • 49
  • 91
4
votes
1 answer

Sidemenu with navigation bar that push content only

I m having an issue implement side menu like this: The point is the architecture. I try to figure out which component will be the AppDelegate's Window's rootViewController (UINavigationController/UIViewController) (And I know that…
gran33
  • 12,421
  • 9
  • 48
  • 76
4
votes
2 answers

How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work…
user1694077
3
votes
2 answers

How to make Mantine burger close after link is selected?

I want to make the Mantine burger auto close after a nav choice is selected in the modal. It seems as if it is not possible for the Mantine burger to automatically close (because the x icon stays). I am using NextJS with Mantine & react-icons. …
soupCodez
  • 31
  • 1
  • 3
3
votes
2 answers

how can make Burger Menu with Angular?

How can make Burger Menu with Angular ? I do not understand how to do in Typescript I am quite a beginner. when i switch my screen to smartphone mode should i hide the nav menu ? homepage.component.html
user13491010
3
votes
1 answer

Bootstrap 4 - How to prevent collapsing menu from collapsing all elements in the nav

I'm using a bootstrap 4 navbar and I want to prevent the logo and language switch from moving and collapsing with the menu when the hamburger menu is clicked. Here is all of my code. Also, here is the link to my codepen. Is this possible?…
Anna S
  • 45
  • 5
3
votes
0 answers

UseEffect Hook with functions wont compile

I'm using 'react-burger-menu' https://github.com/negomi/react-burger-menu And with the help of useContext hook i want another button to close/open the sidemenu that I've implemented. My issue is that i get the following error following their…
Arasto
  • 471
  • 6
  • 25
3
votes
3 answers

Hamburger Menu Toggle Javascript

I've been trying to make a responsive navbar with a hamburger menu toggle. Did it with a tutorial i found online and everything works, except the toggle for the menu. When i click on the icon nothing happens. I'm quite new at this so I don't know…
hoddypeak
  • 39
  • 1
  • 2
3
votes
3 answers

Responsive navigation menu with React and Bootstrap - hamburger isn't working

I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with npm install --save bootstrap And…
sir-haver
  • 3,096
  • 7
  • 41
  • 85
3
votes
2 answers

MahApps Metro HamburgerMenu Binding Not working

I'm not too sure if this is the best place to ask this but I thought I'd give it a go. I'm trying to implement a Hamburger Menu into my application using MahApps Metro UI Toolkit which worked great in a test window I made. So I then started moving…
remiX
  • 33
  • 1
  • 4
1 2
3
…
48 49