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

How do I change the color of the PaneToggleButton in a UWP NavigationView?

I am trying to change color of the hamburger button in a NavigationView. I can change the colors of the NavigationViewItems and the Buttons, but the code below does not change the PaneToggleButton.
BillC
  • 145
  • 2
  • 8
2
votes
1 answer

Open/Close Animated Hamburger Menu when Clicking Button

I'm using an animated hamburger menu (https://jonsuh.com/hamburgers/) to open a full screen menu. It's all working as expected, but I can't figure out how to have the menu close on click (and of course reverse the animation). I was able to add…
Sarah Potter
  • 21
  • 1
  • 4
2
votes
0 answers

How to fix the chrome bug, when using css blur to make the background blurry, when hamburger menu is expanded?

I'm trying to blur the background whenever the hamburger menu is active. I'm using the CSS filter option and jQuery to add the class to the container's div. The effect applies, but every time it turns on/off, the content of the page move a few…
user9449682
2
votes
1 answer

Css Grid and Hamburger Menu

im learning css in general and i am failling very, - v e r y - hard at it... im trying to do a simple thing with my css grid, just animate the hidden menu right to left, instead of left to right, but i dont know what i must change to do it.. Can you…
Vinicius Souza
  • 143
  • 3
  • 11
2
votes
2 answers

Bootstrap: Hamburger Icon is always there

i'm on my first bootstrap site and I have a problem. My Navigation is always collapsed, even in screen size. The hamburger icon works, but it should only be there in mobile-screen-sizes. Can everyone help me?
…
nanny90
  • 21
  • 1
2
votes
1 answer

WPF MahApps HamburgerMenu SelectedIndex

I'm using MahApps HamburgerMenu control with HamburgerMenuIconItem items. When I changing the SelectedIndex or SelectedItem property of HamburgerMenu, selected item is highlighted, but content of this item not showing.
Николай Мартынюк
  • 165
  • 1
  • 12
2
votes
0 answers

MvvmCross Hamburger menu for iOS

I'm using https://www.marcbruins.nl/xamarin-ios-hamburger-menu-mvvmcross/ and it works on Portrait orientation: But on Landscape orientation I have not fill width: Menu class: [MvxPanelPresentation (MvxPanelEnum.Left, MvxPanelHintType.ResetRoot,…
DaleYY
  • 130
  • 1
  • 9
2
votes
1 answer

Hamburger menu font-size issue

My web site is html and css only. I wish it to remain so. Web-site URL: www.yoga-grenoble.net. I started to update a web site so that it displays best on mobile phone. I develop specific css with hamburger menu. However, I face an issue with the…
ChrisL
  • 54
  • 6
2
votes
1 answer

Want to add hover effect to multiple spans

Heyah, I made a burger menu icon, and I want it to change color when you hover over it, but somehow it doesn't work and I don't understand why. I have those 3 spans, which when the menu is clicked turn into just two, and I got the hover effect to…
heartcube
  • 119
  • 12
2
votes
3 answers

Drop down menu by click

For my hamburger menu I am trying to build it so that it a drop down menu by click. For example if your press the plus symbol next to Item 1 the sub items of item 1 will drop down. I've added all of the items and sub items into the hamburger menu.…
user6738171
  • 1,009
  • 2
  • 15
  • 50
2
votes
4 answers

Drawer / hamburger menu in React Native

I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i…
user3521011
  • 1,481
  • 5
  • 20
  • 35
2
votes
2 answers

Clicking to open and close a bootstrap hamburger menu on mobile device without JS

I'm hacking away at a small website project, trying use HTML and CSS only for now, and am pretty happy with the desktop version but when testing on my iPhone I can expand the hamburger menu with a click but it will not collapse upon clicking it a…
BLL27
  • 921
  • 5
  • 13
  • 27
2
votes
2 answers

Hamburger Menu Icon class toggling

I have implemented a hamburger icon using font awesome icons fa-bars and fa-close icons.
2
votes
0 answers

How to show both hamburger icon and app icon in actionbar?

I wish to show both the dynamic hamburger icon from ActionBarDrawerToggle as well as the app icon before the title in a navigation drawer setup. Something like this: If this info is of any use, I have an abstract base drawer activity which other…
AA_PV
  • 1,339
  • 1
  • 16
  • 24
2
votes
1 answer

Xamarin Forms Master Details Page change back button to hamburger menu

I have a xamarin forms app that has the main content as a master details control. The problem im having is that i cant get the hamburger icon to show up when it's deployed to android. On the left you have the app deployed in the android simulator…
Matt
  • 3,305
  • 11
  • 54
  • 98
1 2 3
…
48 49