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
2
votes
1 answer

Avoid ionic side menu from close when click on it

I'm developing with Ionic Framework an app where the main view is a map (working with Leaflet). And in the side menu, there are some forms in order to allow differente searches on the map (shortest path between 2 points...). The thing is, every time…
daniegarcia254
  • 1,157
  • 4
  • 17
  • 36
2
votes
0 answers

Multiple menu's in responsive hamburger menu

I am working on a website with drupal using bootstrap. I have different menu's on the desktop version: top bar menu, main navigation, sub navigation. They are in different locations. When on mobile, I would like to show all those menus in 1…
Nealv
  • 6,856
  • 8
  • 58
  • 89
1
vote
1 answer

JS working in Codepen, but not on Browser

Here's what my code looks like on codepen (ignore broken image): https://codepen.io/kornstalk/pen/ZEqXrgq My issue is that whenever the code is run on browser, the animation on the icon breaks - the menu functions just fine (ignore the styling, I'm…
kornbot
  • 13
  • 3
1
vote
1 answer

Burger button doesn't seem to work at all

I have a burger menu when the screen is small enough however it doesn't react like a button at all, more like an image. I have compared it to other snippets of code and other solutions found on here but I can't find a solution. I have added the code…
Christopher McClure
  • 49
  • 6
1
vote
1 answer

Hamburger icon click does not display menus

I'm trying to build my first website, and I am stuck on this problem. I want to create a responsive Navbar with hamburger menu when I resize a window or when I use the website on a mobile. However, when I click on the hamburger menu, nothing…
Rob m2
  • 13
  • 3
1
vote
2 answers

How do I create a functioning hamburger menu?

So I have tried to create a hamburger menu and have faced no luck. Whenever I click on the menu icon, it changes to an 'X' however it does not open the menu. I have been trying for the last couple of days, and have also researched but have found…
Johnsmith22021
  • 11
  • 2
1
vote
0 answers

Change color of hamburger menu on hover/click

Let me just say that my knowledge in coding is very minimal. I am trying to figure out how to turn the hamburger menu from the current color to white when the cursor hovers it or when you click it. I hope that makes sense! It will be three white…
MissMana
  • 11
  • 1
1
vote
1 answer

My hamburger menu isn't showing up after the media query

After the media query, I can't seem to manage to get the hamburger menu to show up. Navbar links do disappear, but the menu won't show up. *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } :root { --main-color:…
Dino Rozing
  • 13
  • 3
1
vote
0 answers

Framer Motion changes y-axis value because of flexbox

I am using Framer Motion to animate my hambuger menu. I want to make my nav items and icons slide from left to right or from right to left. However the animation on the items changes their y-axis value during the animation on mobile. I figured out…
Milosz_p
  • 31
  • 3
1
vote
0 answers

How to get rid of dropdown color hamburger menu (and if possible, loading delay) on responsive site?

I have a question. I have a personal Joomla 3.10.11 site, PHP version 8which has a strange phenomenon when showing up in responsive mode (see picture). The hamburger menu drops down in green, and then dissapears again. a picture of what happens If I…
Marlies
  • 11
  • 3
1
vote
0 answers

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward…
MORIKOBOSHI
  • 13
  • 4
1
vote
1 answer

Unique Hamburger Menu Animation Sought

I'd like to animate my Hamburger menus for my website landing page. I don't want to do the standard "3 Bars" changing to an "X", which uses the "WebKit". Why not simply animate 2-3 low-res bitmaps rather than loading Webkit? I don't want to slow…
Nicholas Bourbaki
  • 101
  • 11
1
vote
1 answer

How can I FIX/CHANGE the almost invisible Menu Items in my Website's Mobile Version? (Used to be fine then Weebly made changes)

BACKGROUND Years ago, I built my first Weebly website for my business ( www.smehelper.com ) The mobile version 'used to' look great! SINCE THEN However... Weebly made some changes a year or so ago ( I don't know what ), since then, regardless of…
SmallBusinessHelper aka-Steve
  • 11
  • 3
1
vote
1 answer

Mobile burger menu don't close after click

I don't understand why my mobile menu doesn't close after clicking on menu's link. How can I fix this? (() => { const menuButton = document.querySelector(".menu-button"); const menuOverlay = document.querySelector(".menu-overlay"); const items…
Anatolii Horobets
  • 13
  • 2
1
vote
0 answers

Invariant Violation Error when using drawer in React native

ERROR TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode') ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the…
BranchDev
  • 144
  • 1
  • 10
1 2 3
…
48 49