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
1
vote
0 answers

Toggle Burger Menu Dropdown - Clicking on Burger Menu Does Nothing When the Screen is Small

I'm using HTML, CSS & Javascript to code a burger menu but can't complete the drop down action. The burger menu appears when the screen is small but clicking on the burger menu does nothing. I've used JSS to code the action of opening the menu when…
Jack
  • 31
  • 5
1
vote
0 answers

HTML/CSS Hamburger Menu - where to place the div for hamburger menu?

I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of…
1
vote
1 answer

How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?

I'm trying to make the hamburger menu show below the icon in row like it is, but the menu and icon are jumping when clicked. How can I prevent that from happening? I've tried adjusting getting rid of fixed heights and it didn't change. I want…
webdev99
  • 11
  • 3
1
vote
2 answers

How to Enable Hamburger Menu for Tablet/Ipad using Shopify | Debut Theme 2020

I've been searching for a way to enable the debut theme Hamburger menu on Ipad or tablet. Everything works with mobile, but I want to be able to see the hamburger menu on tablet and Ipad as well. Hope someone can help me. Thank you!
1
vote
0 answers

Kotlin - How to animate transition between ActionBarDrawerToggle Indicator and supportActionBar Up Button

I am quite new to Android Studio and Kotlin programming. I'm facing an issue regarding the animation of the left button of the Toolbar in my app. I have an Activity in which I load different Fragments for different purposes. These Fragments can be…
1
vote
3 answers

Blogger SOHO theme: How to always show Hamburger menu on Desktop view instead of open Sidebar?

My blog is https://www.firozemistry.com based on the Blogger SOHO theme (with custom domain). On smaller screens like Mobile or iPad, the Hamburger menu appears on top left in the Header. On large Desktop/Laptop screens the Hamburger menu disappears…
firoze
  • 61
  • 1
  • 10
1
vote
1 answer

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not…
user12548844
1
vote
2 answers

close checkbox hamburger menu, when clicked outside without javascript/jquery possibly

i have hamburger menu which i took from here. https://codepen.io/erikterwan/pen/EVzeRP it is using only css by using a checkbox to expand and collapse the menu. so what i want is when i click outside the menu (anywhere on the page), the menu should…
Sravan Kumar
  • 602
  • 8
  • 22
1
vote
2 answers

Rounded animation Hamburger menu not opening menu items

Ì found a cool script to show a "rounded animated" hamburger menu, see https://jsfiddle.net/sigug/5ohmne6g/25/ I have a ul list of menu items, they currently don't show up because they are "display:none". When I remove that, they are just there…
sigug
  • 1,159
  • 1
  • 11
  • 17
1
vote
0 answers

Why the burger menu does not pop out?

I tried building a burger-menu that will pop out some items when clicked. I managed to create and style everything but when I click it the menu does not come out. I do not understand why, what suppose to make this happen is clicking on the check-box…
Snirka
  • 602
  • 1
  • 5
  • 19
1
vote
0 answers

CSS Hamburger stops working when jQuery library is loaded into project

I am trying to utilize CSS for a responsive hamburger menu and the jQuery for some drop down menu items further down my webpage. The CSS hamburger menu works perfectly fine when I don't have the jQuery library loaded into my project. However as soon…
Mike
  • 23
  • 6
1
vote
1 answer

How to disable Hamburger Icon turnung into arrrow (Navigation Component)

Help me out please. Intro: I use Navigation Component, Single Activity pattern with 3 fragments switched via bottom navigation menu. Also I have Drawer Navigation. All fragments are of the same level (all are root, accessed directly from bottm…
1
vote
1 answer

Change Navigation bar height on iOS Xamarin Forms?

How can I change Height of NavigationPage's Navigation Bar on iOS app in Xamarin Forms ? Actually I have a Master Details Page and I want to change NavBar Height on iOS.
1
vote
2 answers

How do I close a Hamburger Menu once an Item is clicked?

Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked? My HTML is: `
1
vote
1 answer

Hamburger menu - why is my code not working?

I'm trying to do a simple hamburger menu using jQuery or JS (I'm easy either way) but my code simply won't work and I can't for the life of me work out why. It's structured as hamburger top left, logo in the middle then a profile and basket top…
Jon Nicholson
  • 927
  • 1
  • 8
  • 29