1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Suggestion: Add animation to navbar hamburger

slawa pro asked 5 years ago

Here is an example: https://www.codeply.com/go/PkEufEnojF/bootstrap-4-navbar-animated-toggle-hamburger-close Resize the browser window until the navbar changes to mobile style. Click on the hamburger on the top right. It will transform to X and back when you close the menu.

slawa pro commented 5 years ago

The animation looks neat and the x-symbol signals to users that the extended navbar can be closed again.

Marta Wierzbicka staff answered 5 years ago

Hi, I'm not sure what is incorrect in these hamburger menus. And it's enough to click once to open a menu and once to close the menu. But if you see a big problem, please specify it. Best, Marta

Ollie Vincent pro commented 5 years ago

Hi Marta, I believe if you open the menu, but refresh the page, the menu will close but the hamburger will still think it's open (showing a x rather than the three bars). I have noticed this before on other menus too...

Marta Wierzbicka staff commented 5 years ago

Hi Ollie, we will try to fix this in the next release. Best, Marta

Harry Shepard free answered 5 years ago

Hi Ollie I've just noticed if you double click the icon you can get it to be the incorrect state. Can this be fixed easily?

Ollie Vincent pro answered 5 years ago

Hi, There is this option here: https://mdbootstrap.com/components/bootstrap-hamburger-menu/#animations. This was a release with MDB 4.5. The menu isn't big enough to fit everything in it so use the sitemap here https://mdbootstrap.com/md-bootstrap-sitemap/ to navigate around. FontAwesome 5 also offers this functionality if you wish to integrate it into MDB yourself. Thanks
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
slawa
Pro User 109Support score
8Questions 7Answers 1Snippets