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
Brightie
Brightie16mo ago
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
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Brightie
Brightie16mo ago
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
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Brightie
Brightie16mo ago
Youcould also fully use css if you make use of "display:hidden" to hide and show as neccesary
Want results from more Discord servers?
Add your server