Replace button elements with option elements in a select dropdown on smaller viewports

A horizontal row of buttons (or links) looks great on large viewports but there’s no space for that on small (mobile) viewports. We could use CSS to simply stack the buttons but then it takes up too much vertical screen real estate.

Instead we can use Javascript to take the button elements and use them to build a new select element with corresponding option elements. This effectively turns the row of buttons into a dropdown menu which is much easier to use on a mobile device.

Todo: Combine this code along with the code found in the JS: Window resize event that watches if the viewport is less/greater than a specific value article that I also wrote today. But you’ll need to add additional code that changes the select and option elements back into button elements when the ‘greater’ viewport is triggered.



const viewportWidth = window.innerWidth
if (viewportWidth <= 1024) {
	// Get the 
    element from the HTML markup const ulElement = document.querySelector('.partners__categories') // Create a new element selectElement.appendChild(optionElement) }) // Replace the
      element with the new