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

How can I minimize JavaScript for a hamburger menu?

I made a hamburger menu using HTML, CSS, and JS and it works perfectly fine but I want to minimize my JS logic. I did some research on YouTube, but everyone has almost the same logic. Look at my JS logic, can I minimize my JS logic? If you have…
Swapnil Kotkar
  • 121
  • 11
6
votes
2 answers

Why is my hamburger menu toggling twice instead of only once after two screen resizes?

I have a great little hamburger navigation menu almost working, but there is some weird behavior that happens only after I resize the window twice. The hamburger button does what it should if I load the page when the window is narrow (width <…
CoderScissorhands
  • 485
  • 1
  • 6
  • 26
6
votes
1 answer

how to get responsive hamburger menu to not push down content

I have this responsive hamburger nav that is currently pushing down the content below it. Is there a way to get it to just hover over the content instead? I have tried so many things, nothing that I am doing works but I'm not an expert. Any help is…
Kim
  • 1,175
  • 2
  • 10
  • 21
6
votes
1 answer

Default Android Studio Navigation Drawer Activity Template does not show Hamburger Icon, only arrow icon

This person is basically running into the same problem I'm having, however, the provided solution is not helpful, nor does it work for me since my code is in fact calling mDrawerToggle.sycnState() (in a deferred Runnable). I've also tried adding it…
Enuratique
  • 261
  • 2
  • 5
5
votes
1 answer

how to change toolbar icon (hamburger icon) when using navigation drawer with jetpack navigation component

I'm using jetpack navigation component to build a navigation drawer, I want to change hamburger icon of the toolbar, I tried many solutions like bellow but they don't…
Blind Side
  • 53
  • 5
5
votes
2 answers

Add back button to Toolbar for all Fragments other than Home Fragment which opens Navigation Drawer

When my application is opened Home screen is shown first.On Home screen I have NavigationDrawer which get opened after pressing HamburgerIcon.Later i go to different fragments.When I am in Other fragments other than Home Activity I need to show back…
Satyam Gondhale
  • 1,415
  • 1
  • 16
  • 43
5
votes
5 answers

How do I make my hamburger menu appear directly under my hamburger icon?

I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style .menu-btn div { position: absolute; left: 100%; top: 64%; padding-right: 8px; …
user7055375
5
votes
2 answers

Close hamburger menu after click event

I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired…
Jack O
  • 1,215
  • 3
  • 10
  • 9
5
votes
1 answer

Bootstrap navbar hamburger menu does not open

I am using Bootstrap Version 3.3.5 from getbootstrap.com. I copied the navbar code from their website (https://getbootstrap.com/components/#navbar). I adjusted this code so that it looks how I want it to look. This is how it looks right…
Olivier Van Heulen
  • 53
  • 4
5
votes
1 answer

Create a hamburger menu with navigation drawer in Android

I want to create a hamburger menu in android with navigation drawer. I've already developed it but according to the requirements the menu should slide out the base fragment instead of overlapping. I want to develop something like the hamburger menu…
Salman Khan
  • 140
  • 1
  • 1
  • 10
4
votes
2 answers

Why is my hamburger menu closing when I first open the page?

Any help is appreciated and thanks. The problem: Basically when you first open the web page (and only the first time, or when you refresh the web page) you see the hamburger menu closing, I do not want this, I only want the hamburger menu to open…
Pranav Borse
  • 63
  • 8
4
votes
4 answers

how to change Action bar icon (hamburger icon) when using navigation drawer with navigation component

I want to change the home up indicator but it doesn't work when using navigation component I tried the solution from here and didn't work how to change toolbar icon (hamburger icon) when using navigation drawer with jetpack navigation component My…
Hussien Fahmy
  • 1,119
  • 6
  • 24
4
votes
3 answers

How to close react-burger-menu when link click in a component?

i am working with negomi/react-burger-menu. i want to close my sidebar menu when a link is click not outside or cross button click just link click then my sidebar menu automatically close itself. But problem is my link is under another component ,…
Koushik Saha
  • 357
  • 1
  • 3
  • 11
4
votes
2 answers

How do I change the color of the hamburger menu icon?

First of all, I'd like to clarify that I'm willing to change the color of the Hamburger nav menu icon itself, and not the icons within the nav menu. I followed this tutorial:…
Eric
  • 477
  • 3
  • 17
4
votes
1 answer

Bulma navbar hamburger menu doesn't expand

I copied Bulma's basic starter template and the basic navbar. However, when I click on the hamburger menu, nothing happens :(. Am I missing something? You can try it in my jsfiddle: …
at.
  • 50,922
  • 104
  • 292
  • 461
1
2
3
…
48 49