Topic: Hamburger menu animation

demzl25 premium asked 10 months 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 10 months 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 premium commented 10 months ago

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


Danny priority commented 10 months ago

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


demzl25 premium commented 10 months 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 10 months 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 premium commented 10 months 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 10 months ago

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


demzl25 premium commented 10 months 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 10 months 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 premium commented 10 months 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

  • User: Premium
  • 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