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

Is there a way to add hamburgers to react bootstrap toggle navbar?

I could not find a quick solution to implement nice hamburgers from https://jonsuh.com/hamburgers/ to react-bootstrap. It does not work with (because it is button inside the button).
Yaro
  • 136
  • 8
1
vote
1 answer

Trying to position the hamburger icon for a responsive menu

I'm trying to create a responsive menu where the hamburger icon pops up under 640px width screen -- the menu mostly works but I cannot figure out how to get my menu items "About," "Work," and "Resume" to appear beneath the hamburger icon - it always…
user19553015
  • 13
  • 3
1
vote
0 answers

Fix search input below navigation items with TailwindCSS

Currently having a struggle getting the search input to position below the navigation items on the hamburger menu, either it works and breaks the position on desktop or it doesn't work at all and sits to the right How it looks currently Navbar…
Thomas
  • 11
  • 1
1
vote
1 answer

Why is toggle active not working in the below code?

I am confused by the steps on how to post code on stackoverflow. Please look at codepen for entire code: Codepen const hamburger = document.querySelector(".hamburger"); const navMenu = document.querySelector(".nav-menu"); …
user17958456
  • 35
  • 3
1
vote
0 answers

Create responsive hamburger menu in React for active category toggler

I am building my first project in React, a website for a restaurant that displays a menu, and have already implemented a Nav that toggles to a hamburger menu when viewed on mobile, and I have another menu component that toggles between different…
jmgarza94
  • 11
  • 2
1
vote
0 answers

How make a verticale smooth transition in CSS with react component?

I try to make a smooth transition for my hamburger menu, but I don't find solution to do it... I'm not really fluid with the CSS and it's very difficult to find a good example on the web or a good tutorial to explain the process. below my code, I…
Knupel
  • 323
  • 2
  • 14
1
vote
0 answers

Why does my Hamburger menu didn't work on other page

currently i'm working on my portfolio website, i've created hamburger menu using Javascript and it works on my homepage, but when i created another page, i copied everything from
, but the humburger menu didn't work. I am sure that i already…
igeegi
  • 21
  • 2
1
vote
0 answers

Responsive Hamburger Menu is not working on Mobile when Clicked

I have created my Responsive Hamburger menu in React. It works fine on Desktop however the hamburger doesn't drop when clicked, it shows this error when clicked :: TypeError: Cannot read properties of null (reading…
Palani
  • 21
  • 5
1
vote
2 answers

React Hamburger Menu unfunctional

I need help. My responsive hamburger menu is not working when clicked on. It is supposed to show the navigation links but it is not doing so, its not even switching icons when clicked on. When I remove this line "{open && NavLinks}" and just leave…
Botshelo Ramela
  • 33
  • 6
1
vote
3 answers

Query selector selecting an invisible element

Currently have a website that utilizes JavaScript to make CSS elements visible & invisible. One element being within the HTML and the other in CSS. This is the hamburger menu. Attempting to close the hamburger menu tapping/clicking outside of the…
Jarrod H
  • 45
  • 6
1
vote
1 answer

Display None CSS Rule disabling JS code when removed

EDIT: The mobile query class .Nav contains "display: none;" within it. The javascript code works as intended opening and closing the desired classes. Although the open class is invisible due to the "display:none" in the .Nav class. Once this code is…
Jarrod H
  • 45
  • 6
1
vote
1 answer

Create a responsive burger menu

I've made a lot of progress on my site, but the problem is that my burger menu doesn't show up, does anyone have an idea what's causing this please? I tried different things, debugging and so on but I can't make it appear again -_- So if anyone…
user16386411
1
vote
1 answer

My Hamburger menu is not visible. Please help me to design this

Here my code is working. but hamburger menu not visible. Here .menu-wrap .menu this selector causing the problem. After adding this hamburger is not visible. How can design so that I can see the hamburger menu and click. Is there any way to do…
Barun Bepart
  • 31
  • 9
1
vote
1 answer

Why
html tag is not used as hamburger menu?

I have never seen this but it looks like a perfect fit for
. Is this bad for SEO or why it's not used?
already works as a hamburger without javascript and its global support is 96.6% on https://caniuse.com/?search=details. Have…
link2name
  • 121
  • 7
1
vote
1 answer

What's the best way to create a hamburger menu from scratch in Reactjs without using Hooks?

I'm trying to create a hamburger menu within React using state and onClick, from scratch. I have no experience with React Hooks so am trying to avoid that. The solution I have right now works, but is slow and glitchy and I have a feeling the code is…
shelbz
  • 15
  • 1
  • 3
1 2 3
…
48 49