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

How do I make my checkbox hamburger menu work correctly?

I'm trying to create a pure css hamburger menu. I have done this in the past before, but can't get it to work now. I can get the hamburger animations working when checked, but can't get the menu to become visible when checked. I have no idea what I…
FigNeuton
  • 21
  • 1
2
votes
2 answers

Hambuger menu does not respond when clicked (HTML/CSS/JS)

Creating a basic HTML/CSS webpage. I added some CSS and JavaScript features so that the hamburger menu icon could be clicked and show a sidebar. After implementing JavaScript, the sidebar no longer shows on screen (which was what I wanted), but now…
jospehmartorello
  • 23
  • 4
2
votes
2 answers

Hamburger Navigation Menu Slide Animation in Swiftui

I am trying to build a navigation drawer with slide animation for left menu content and opacity animation for the background of the menu. The code below works fine for me except for the animation. I am not sure where exactly the animation went wrong…
Malav Soni
  • 2,739
  • 1
  • 23
  • 52
2
votes
0 answers

Why is the Hamburger animation different on Safari and Chrome?

We are trying to build the hamburger animation however the blue square on the bottom left is distorted on Safari (the blue square skips downwards on Safari) but works without a hitch on Chrome. Can someone tell us how should we tune the CSS? We have…
Ah Lag
  • 91
  • 1
  • 12
2
votes
1 answer

How do I hover to change the hamburger menu colour, click the hamburger menu to transform it to x and have the contents dropdown?

I am an amateur at coding and I am trying to code for my own website. How do I create a hamburger icon that changes to gold upon hovering and transforms into an X with dropdown contents after clicking? The following is my code for a hamburger menu…
gnit
  • 33
  • 6
2
votes
1 answer

SVG hamburger menu: how can I change its color every time I clicked it?

I am aware this is a pretty newbie question but I can't figure out a solution on my own. I have the following SVG hamburger-menu icon:
Alfio Federico Di Pinto
  • 35
  • 5
2
votes
1 answer

How to close 'react-burger-menu' by clicking outside menu and menu item

What is the most efficient way to close menu on click in React functional component? I'm trying to get close on clicking either or outside menu. Currently it stays open when I navigate to other component. I use:…
inhyechoi
  • 107
  • 1
  • 2
  • 11
2
votes
1 answer

How to close hamburger menu when you click on link?

I'm making humburger menu, and if you can see it works, but when I click on the link it has to close, so how to close hamburger menu when you click on link? #menu__toggle { opacity: 0; } #menu__toggle:checked~.menu__btn>span { transform:…
Dima
  • 27
  • 1
  • 6
2
votes
2 answers

How do I position my React hamburger menu flush at the upper right of my site?

I want to build a hamburger menu to display on the mobile version of my React 16.13.0 app. I'm following this tutorial -- https://www.zacwillmington.com/how-to-add-a-hamburger-menu-to-your-website/ . So I created my nav bar component like…
Dave
  • 15,639
  • 133
  • 442
  • 830
2
votes
1 answer

How do I use hamburger-react-menu just on mobile or small screen?

I would like to have a mobile menu in my component, however, it should work only on mobile devices. After clicking on it options like Home, Furniture Chair... should appear. I have my hamburger-react-menu installed, but not sure how to go about…
present_perfect
  • 149
  • 1
  • 2
  • 10
2
votes
1 answer

SwiftUI: Can I add more Views to TabView then Tab Items?

I consider whether there is possibility to add more Views to TabView in SwiftUI then there is place for TabItems. I have done something like this: TabView(selection: $selectedTab) { Text("Hello World 1") .tabItem { …
Michał Ziobro
  • 10,759
  • 11
  • 88
  • 143
2
votes
1 answer

Custom Hamburger icon with Navigation Component

I'm using new Navigation Component in my project. I created a custom Toolbar which will keep the Title in the centre even when having navigation drawer. This is how my toolbar looks now. I'm trying to put a custom hamburger and back icon…
Shahal
  • 1,008
  • 1
  • 11
  • 29
2
votes
1 answer

How to convert document.querySelectorAll() into ReactJS?

I am trying to convert a pure JavaScript, CSS, and HTML animated navbar into a ReactJS component to use in a project. The original code is written in HTML with a separate CSS styling file, and a JavaScript file which is linked to the HTML code via…
Reuben McQueen
  • 47
  • 1
  • 6
2
votes
2 answers

How to remove hamburger menu after clicking away or on in-page anchor link

I want to make the hamburger menu close when I either click on a link(which all lead to a location on the same page), or click somewhere away from the menu. Currently, I have to click the link, and then close the menu manually by hitting the…
Richard B
  • 21
  • 3
2
votes
2 answers

Install Hamburger CSS on Angular

My intention is to install the Hamburger CSS from Jonathan Suh on my Angular Project. I used npm i --s hamburgers which successfully added the package. I also added its CSS file to my angular.json file. When I try to add a hamburger using the code…
user11204114
1 2 3
…
48 49