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

How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4?

I am trying to get this hamburger to ignore my shopping cart and login buttons. I have forced the collapsed menu view on all screen sizes in this snippet so you can see how it is not working they way I want. What I want: A. For xs screen sizes:…
Grismund
  • 53
  • 6
1
vote
0 answers

Page scrolls on mobile devices due to hidden menu

UPDATE AT BOTTOM: I discovered a partial solution, but still not a total solution. So, I will leave my question up. I have made a new webpage, and placed the hamburger menu on the top right of the screen, and hidden it off screen when not selected.…
GordonWayneWatts
  • 11
  • 5
1
vote
0 answers

Bootstrap 5 Hamburger Icon Doesn't Show (Trouble with navbar-toggler-icon)

I have a weird problem where the navbar-toggler-icon refuses to show. It used to show it but suddenly something made it disappear. The JS is working and it does open the menu, but the icon itself refuses to show. Excuse my poor inline-styling and…
Joints
  • 21
  • 2
1
vote
1 answer

How can I disable scrolling when my hamburger menu is open?

I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried…
CamSproule
  • 11
  • 3
1
vote
1 answer

the hamburger menu is not showing in safari. it working fine on chrome and Firefox

I have a responsive menu and its work fine in chrome and firefox but not working in the safari on mobile. the website builds with Elementor WordPress and I think adding some -webkit- will solve it but don't know how?
xada.dev
  • 23
  • 6
1
vote
0 answers

Burger Menu Drop Down Navbar background colour

First of all, I have not coded properly in around nine years, so I'm trying to re-learn from scratch pretty much. I'm having an issue with the background colour of a drop down menu from a burger menu. The burger menu appears when you minimise the…
cmc89
  • 11
  • 2
1
vote
0 answers

How do you type a three lined equal sign that looks like a hamburger menu inside of a user.js file?

I am studying via tutorial, on email authentication. Inside the user.js file, there's an equal sign that looks like a hamburger menu. I have searched online and it talks about it on Wikipedia but I see no solution as to how to "type" the character…
rjhprogress
  • 11
  • 2
1
vote
1 answer

Hamburger Menu Navigation (Small Issue)

I'm having a small error with my hamburger menu. It functions the way it should and opens and closes when I click on the hamburger icon, the issue is that when it is closed, I can see a very small part of the top link that would be at the top of the…
Nathan Bayne
  • 190
  • 12
1
vote
0 answers

Bootstrap navbar button toggler suddenly stopped working (hamburger menu)

when I clicked on the hamburger menu it used to work then suddenly stopped
1
vote
2 answers

NavBar Menu Responsive

I'm trying to made a burger menu with CSS/JS. I have a navbar (nav) menu that display like this in computers: And in Burger Menu when the resolution is less than 768 px (resolutions for tablet and devices that is under this resolution) like…
Zaka_dev
  • 55
  • 4
1
vote
2 answers

How to show hamburger menu only on mobile-Angular?

I have a regular navbar on larger screens. I want to have a hamburger menu only on mobile devices and the menu icon only to be shown on mobile. I want to achieve that with Angular(I am beginner). How do I do that , don't want to use Angular…
Sarah Barlow
  • 55
  • 1
  • 9
1
vote
0 answers

Transition property works on the burger button but doesn't work on the menu with class "mobile" when hides/shows

I'm experiencing an issue where the transition property works for the burger but it doesn't work for the menu. It hides/shows with no transition effect. .top-menu .burger-menu { width: 35px; height: 5px; background: var(--text-dark-blue); …
Cleverwat
  • 11
  • 1
1
vote
2 answers

How to fix an error while loading JS file into Django?

I am making a university project in Django and when I load the JS for the responsive burger menu of the nav, it does not load properly I suppose. So the problem is that when I inspect it in chrome and check the loaded files, from the JS file which…
MomchilovP
  • 39
  • 3
1
vote
3 answers

Clicking Hamburger Icon does not open Navigation Drawer

I have simple a navigation drawer app and the navigation drawer and hamburger is work fine in my main activity. In the "Visiting Place" activity I do all things the same as the Main activity. All I am trying to do is to open a NavigationDrawer by…
Kunal Kayal
  • 43
  • 2
  • 8
1
vote
1 answer

How to make my burger menu dissapear when clicking on link

I created a burger menu which has the following JS: const navSlide = () => { const burger = document.querySelector('.hamburger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links…
reekArd
  • 15
  • 5
1 2 3
…
48 49