I have a fixed menu with a centered logo, left and right menu items. My float right menu items are showing beside the hamburger menu on responsive/mobile settings. Not sure how to fix this.
Do I need to hide those nav items specifically on the @media screen? my code from dreamweaver refuses to copy and paste here
<div class="topnav" id="myTopnav">
<div class="topnav-centered">
<a href="index.html">JACQUELYN MCGARRY</a>
</div>
<a href="about.html">ABOUT</a>
<a href="contact.html">CONTACT</a>
<div class="topnav-right">
<a href="shop.html">SHOP</a>
<a href="work.html">WORK</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i>
</a>
</div>
/THE CSS CODE/
.topnav {
position: fixed;
top: 0;
width: 100%;
padding: 0px;
background-color: #f9f7f7;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom-style: solid;
border-width: 2px;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 24px 12px 24px;
text-decoration: none;
font-size: 13px;
font-weight: 900;
font-style: normal;
}
.topnav a:hover {
padding: 12px 22px 10px 22px;
border-style: solid;
border-width: 2px;
border-radius: 50%;
color: #101010;
}
.topnav .icon {
display: none;}
@media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topnav-right {
float: right;
}
@media screen and (max-width: 500px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 500px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
question from:
https://stackoverflow.com/questions/65661032/float-right-menu-items-are-showing-as-well-as-hamburger-menu-on-responsive-mobil 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…