Topic: Suggestion: Add animation to navbar hamburger

slawa pro asked 6 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 6 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 6 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 6 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 6 years ago

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

Harry Shepard free answered 6 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 6 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

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags