Just like @vincent, I too would suggest creating the navbar entirely from scratch, by yourself. It sounds like a lot of work, but it isn’t! If you’re good with interactions, you should do just fine. I’m not going into too much detail in this post, but if you need me to, I wouldn’t mind. Here’s the steps:
- Add a new div, call it “navbar” or whatever you’d like.
- Set the display to block, on tablet and mobile views but to hidden on desktop.
- Give it a “fixed” or “absolute” position and set 0 pixels from top.
- Set width and height as per your requirement. Now start adding content inside. Add two divs, one for the logo, and one for the burger icon that opens your dropdown. Both divs can be absolute positioned, the logo can be 30 pixels from the left, and the icon div can be 30 pixels from the right.
- Add another div inside your header, call it “nav link container”, make it absolute, give it a width of 100% and height of auto. The display should be vertical flex-box. Place your nav links inside this box, and set position to -100vh from top so it goes out of the screen.
- Give your menu icon div an on-click interaction, and on click, bring the nav link down to 0vh from top. On second click, make it go back to its initial position.
This is basically how you create a menu for mobiles on your own. It works perfectly, is highly customizable and works the way you want it to. Of course it wouldn’t appear perfect at first look if you follow my directions, you’d have to tweak the numbers and positions a little bit, but that’s just the most basic way to do it. There’s also numerous other styles and methods to make it work if you have the time to play around with interactions a little bit. Even if it sounds difficult, you should stick to this method of doing it. Once you get the hang of it, it gets super easy and will help you make really creative mobile navigation functionalities!
Good luck and let me know if you need more details, would love to help.