My attempt to create a responsive menu resulted in unexpected outcomes when selecting specific elements. For instance, choosing "nav ul li" for list styles at the default size and using "ul li" for the breakpoint did not produce the desired effect.
The issue was resolved by opting for "ul li" for both the default size and the breakpoint. However, I'm puzzled as to why this fixed the problem, given that I believed selecting "nav ul li" and "ul li" would yield the same result. Can someone provide insight into this?
nav {
width: 100%;
background-color: darkblue;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: orange;
}
ul li a {
color: #ffffff;
text-decoration: none;
}
.toggle {
width: 100%;
padding: 10px 20px;
background-color: #001f44;
text-align: right;
box-sizing: border-box;
color: #ffffff;
font-size: 30px;
/* to hide toggle */
display: none;
}
/* Break Point for the toggle */
@media screen and (max-width:768px) {
.toggle {
display: block;
}
ul {
width: 100%;
}
ul li {
display: block;
text-align: center;
}
}<div class="toggle">
<i class="fa fa-bars"></i>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
</ul>
</nav>