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
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
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/3640509demzl25 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.