How to make a better menu for cell phone and tablet display

Or save time and use Bootstrap responsive framework for your project.

In DW CC, go to Insert > Bootstrap Components > Navbar...  pick one.

Are you wanting to make a drop down menu for tablet and smartphone so the current menu takes up less real estate when the page loads?

If so add the css below AFTER your 'nav' css selector which is near the start of your css styles - (4th in the list)

nav ul {
display: none;
}

.mobileMenuIcon {
display: block;
cursor: pointer;
}

@media screen and (min-width: 768px) {

nav ul {
display: block;
}
.mobileMenuIcon {
display: none;
}
}
.showHide {
display: block;
}

Replace the text and add the 'mobileMenuIcon' class to the <p> tag which is directly above your starting <ul> tag for your menu code:

<p class="center mobileMenuIcon">Mobile Menu Icon</p>

Then add the below javascript to the end of your pages code, directly above the closing </html> tag:

<script>
const mobileMenuIcon = document.querySelector('.mobileMenuIcon');
const navUl = document.querySelector('nav ul');
mobileMenuIcon.onclick = function() {
navUl.classList.toggle('showHide');
}
</script>

That will give you a basic drop down menu for tablet and smartphone devices if you click on the text 'Mobile Menu Icon'. You can replace the text with a hamburger icon from font awesome (an icon library) or an image. You can also hide the text 'Nav Menu' and the icon of the little bloke typing if you wish for mobile devices.

better, yes, but in which directions
- ergonomics
- design
- accessibility
- usability
- code optimization
- loading time
- adaptability
- all ?