Responsive menu in default Underscores template not going verticle

I was having an issue for the last day trying to understand why my responsive menu for my custom WordPress theme using an Underscores.me template was not allowing the navigation items to display vertically above one another. I do want the menu to display horizontally when on larger screens. I researched W3Schools.com and took apart the default WordPress Twentyseventeen theme for hours removing CSS item after item trying to get the working theme to fail in hopes it would lead me to an answer. But arghh, to no avail!

But then I found the answer. I was looking in the wrong place all this time. After pondering a simple version of a responsive navigation menu on the W3Schools website, i noticed the float: left was changed to float: none in the smaller widths, which then allowed the display: block to actually work for the li elements. As soon as you add the float: left to the li, it removed its ability to be a block element and then all the menu items would return to horizontal.

Alas, in the style.css for the default Underscores theme i removed the float: left from the .main-navigation li {} and then in the media query section that adjusts for sizes above mobile added in a new .main-navigation li {} to include the float: left and voila… all is right in the world again.

Sometimes the simplest of things is the correct answer. If anything looks difficult, step back and rethink the process and you might just come up with a solution.

here is the adjusted code (minus the parts in between the actual file)


.main-navigation li {
/* float: left; */
position: relative;
}

@media screen and (min-width: 37.5em) {

.main-navigation li {
float: left;
}
}