During the development of a responsive website, I encountered an issue with the topbar menu. The menu contains numerous options, which is ideal for larger screens. However, on smaller viewports like cellphones, the buttons start wrapping rather than fitting properly.
For a normal viewport:
https://i.sstatic.net/yZTRN.pngFor a cellphone viewport:
https://i.sstatic.net/W7Smr.pngSnippet of the code used:
<header class="header" id="header">
<!-- Code snippet here -->
</header>
To address this issue, I attempted to hide certain menu elements on smaller viewports using the Bootstrap5 utilities d-none and d-flex-sm classes (https://getbootstrap.com/docs/5.0/utilities/display/)
However, the elements still wrapped even though there was ample space on the small screen:
https://i.sstatic.net/0Vk75.png
If you have any suggestions on how to resolve this issue, please let me know.
Full code:
HTML:
<!DOCTYPE html>
<!-- HTML code here -->
</html>
CSS:
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
/* CSS code here */
JS:
document.addEventListener("DOMContentLoaded", function(event) {
// JS code here
});