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
3
votes
2 answers

Why is my hamburger navigation not loading when its in desktop mode?

I am coding a website for my high school, and I am using a hamburger navigation for the website. When the website is shrunk to mobile mode, the hamburger loads and everything works. But if I close the hamburger and bring the website back to Desktop…
Chayton L.
  • 33
  • 7
3
votes
2 answers

implementing sideBar/hamburger menu with react-native drawer

I'm quite new to React-Native. I'm trying to add sideBar/hamburger menu to my application with implementing 'react-native drawer' component. Firstly, I'm trying to add the example code from GitHub to my new test project just to understand how it…
Ali Zeynalov
  • 2,867
  • 8
  • 30
  • 54
3
votes
2 answers

Hamburger to arrow animation not working programmatically

I have made a server directory browsing app which would change contents within the Activity itself. I have been adding a feature: Navigation Drawer and handling the Hamburger and Back icon on the Toolbar as follows: Home directory: Hamburger icon…
burglarhobbit
  • 1,860
  • 2
  • 17
  • 32
3
votes
0 answers

Missing Hamburger Icon Android

I tried searching for different answers regarding the hamburger icon, but haven't found anything similar. I'm trying to create a hamburger icon and have been following a tutorial. The code runs fine, but the icon is missing when I open it in the…
Edwin
  • 43
  • 7
3
votes
2 answers

How to Animate the Up-Button to Hamburger like in Gmail

I have seen solutions to implement hamburger to up-arrow navigation and vice versa. And I have only seen this where DrawerLayout is used. Now I have Activity A and B. Activity A is the launcher activity, it has a hamburger icon in the action bar and…
X09
  • 3,827
  • 10
  • 47
  • 92
3
votes
3 answers

UWP Animated Hamburger Icon

I would like to add an eyecatching animated Hamburger Icon to my SplitView in c# UWP XAML project. I know there are tons of CSS animated icons (like here or here the one in [2,2]) out there to find, but rarely ones for XAML. And there is a guy, who…
user3079834
  • 2,009
  • 2
  • 31
  • 63
3
votes
1 answer

Responsive navigation

I'm currently building my very first responsive website. For tablet, laptop and desktop use, the navigation is 'sticky' and works just as i'd like it to. For any display smaller than that, the navigation is hidden inside a typical 'burger menu'…
Alex E
  • 107
  • 10
3
votes
3 answers

How to open Side bar on icon click in Android?

I have implemented Hamburger bar with App toolbar and both of them are working fine. Following is the snapshot of toolbar and hamburgerbar: Hamburger bar I can open this bar by sliding it but I also want to make it open by clicking on drawable…
user5063816
3
votes
2 answers

Android burger/arrow icon dynamic change color

I want to change color of burger/arrow icon of navigation drawer. I know I can change it in styles, but I want change it dynamically in java. Did anybody know how to do this?
Rafal Ulko
  • 41
  • 2
3
votes
1 answer

Burger menu back to 3 links after menu item is clicked

I have a burger icon that when clicked turns into an X. When clicked again turns back into the 3 lines. I have it working so when the links are clicked the menu goes away, but the burger menu doesn't return back to 3 lines. Nothing I have tried is…
icekomo
  • 9,328
  • 7
  • 31
  • 59
3
votes
2 answers

Bootstrap responsive menu not clickable

I am trying to fix a site written by someone else. Most things seem to work, except for the menus in responsive view. The "hamburger" button does appear, but it's not clickable. The CSS is kind of huge, and I don't quite know where to…
Dave
  • 628
  • 5
  • 13
2
votes
1 answer

Bootstrap v5.0.1 - Hamburger menu not auto closing when clicking same page anchor links - Responsive

Dear stackoverflow community, For some odd reason I can't figure out why the hamburger menu when responsive or non responsive if collapse is enabled doesn't auto close when clicking on same page anchor links. Can someone point me to the right…
JESSE
  • 21
  • 5
2
votes
2 answers

I'm trying to add a responsive hamburger nav to my pre-existing navbar, but for some reason it isn't showing up

I was following along with a tutorial to try and figure out how to insert a responsive hamburger icon for my navbar using css html and a tad bit of js. However I've gotten halfway through the video to the portion where I should be able to see the…
imkmack
  • 23
  • 5
2
votes
2 answers

Responsive navigation bar not displayed (hamburger menu)

I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens. I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul…
Yousha Ahmed
  • 66
  • 1
  • 3
2
votes
0 answers

Closing sidebar when clicking on link

I am using react-burger-menu for my project and i have a issue to close the sidebar when clicking on the links in menu-wrapper. I am pretty new in react so i want to learn the logic behind it , i have succeded to send a prop but dont know how to use…
mahdi
  • 21
  • 3