How to create an overflow navbar dropdown menu?
I'm trying to replicate the navbar from the World of Warcraft website using mostly Bootstrap, here: https://worldofwarcraft.blizzard.com/en-gb/
I've gotten pretty close but struggling with the responsive feature where nav links get put into a dropdown menu when reducing the screen size up until the mobile menu shows. It's pretty clever.
Here's my version: https://codepen.io/Fotek/pen/oNQaQGq
Appreciate any guidance.
World of Warcraft
World of Warcraft
Join thousands of mighty heroes in Azeroth, a world of magic and limitless adventure.
3 Replies
https://www.w3schools.com/howto/howto_js_media_queries.asp
Use JavaScript, this link will show you how to use mdia queries in JavaScript
Doing so you can set a max-width media query
From there you can either use html items you have hidden and toggle them to be visable
Or you create the elements from scratch using javascript
by using document.createElement('element') and appendChild() to add your created elements to the DOM
If you need some more help with the dropdown itself, here is an example (you can also read the code if you click on "try it yourself" https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
Youcould also fully use css if you make use of "display:hidden" to hide and show as neccesary