Topic: Hamburger menu animation

demzl25 priority asked 2 years ago


Hi,

It is possible to add this this hamburger animation in the link below to navbar hamburger menu? Link to the snippet: https://codepen.io/Zaku/pen/vcaFr

Thanks,

Damjan


Danny priority commented 2 years ago

The code data-mdb-toggle="" data-mdb-target="" will open what you want, just add that to the svg. https://mdbootstrap.com/snippets/standard/danny3445/3640509


demzl25 priority commented 2 years ago

Thanks for help but Im not able to get it working in mdb.


Danny priority commented 2 years ago

I had included a snipped where you can see that I had also done it in mdb?


demzl25 priority commented 2 years ago

Thank you i didn't notice. Is it possible that hamburger icon stays on top in the menu (icon not collapsing with collapsing menu)?

I have created snippet: https://mdbootstrap.com/snippets/standard/demzl25/3643373#html-tab-view


Michał Duszak staff commented 2 years ago

If you want your navbar to be always on to, add .sticky-top class to your nav element.

https://mdbootstrap.com/snippets/standard/m-duszak/3643552

If you want your hamburger icon to be always on top, you can also position it as you desire.

https://mdbootstrap.com/snippets/standard/m-duszak/3643595


demzl25 priority commented 2 years ago

Thanks, but i had in mind (normaly working menu) when you click on hamburger icon the icon stays on top in the menu and only collapsing menu is collapsing (icon not collapsing with collapsing menu)?

here is the snipped of issue: https://mdbootstrap.com/snippets/standard/danny3445/3640509


Michał Duszak staff commented 2 years ago

Simply put hamburger over the collapse el  https://mdbootstrap.com/snippets/standard/m-duszak/3643775


demzl25 priority commented 2 years ago

Thanks, i have fixed that.

But now i have issue with how to make navbar same hight on all breakponts? When is hamburger menu active at breakpoints xs sm md have more hight that navbar expended at lg breakpoint? How to fix this?

Here is the snippet: https://mdbootstrap.com/snippets/standard/demzl25/3643810#css-tab-view


Michał Duszak staff commented 2 years ago

Height of the navbar is calculated based on elements it contains. To achieve the same height, you can for example set the fixed height of a hamburger icon.

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3646369


demzl25 priority commented 2 years ago

Thanks that solve the issue.



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: pv
  • Browser: Chrome 97.0.4692.99
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes