Hamburger menu animation

Topic: Hamburger menu animation

demzl25 pro premium priority asked 3 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 pro premium priority commented 3 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 pro premium priority commented 3 years ago

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

Danny pro premium priority commented 3 years ago

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

demzl25 pro premium priority commented 3 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 3 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 pro premium priority commented 3 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 3 years ago

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

demzl25 pro premium priority commented 3 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 3 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 pro premium priority commented 3 years ago

Thanks that solve the issue.

Add comment