While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like this: https://i.sstatic.net/KVerf.png. Removing the line right: -200px; resolves the issue, but I still need to move the content off the screen. Is this zoom behavior specific to Next.js, and is there a way to fix it? Thank you for your assistance!
.navigation-main {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2% 6%;
background-color: transparent;
}
.nav-links-main {
flex: 1;
text-align: right;
}
.nav-links-main a {
text-decoration: none;
font-size: 15px;
color: #fff;
}
.nav-links-main ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links-main ul li::after {
content: "";
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links-main ul li:hover::after {
width: 100%;
}
.bars {
width: 25px;
color: #fff;
cursor: pointer;
display: none;
}
@media (max-width: 822px) {
/* make navbar responsive */
.nav-links-main ul li {
text-align: center;
display: block;
}
.nav-links-main {
position: absolute;
background: #f44336;
min-height: 100vh;
width: 200px;
top: 0;
text-align: left;
z-index: 1;
right: -200px;
}
.bars {
display: block;
}
} <div className="nav-links-main" id="navLinks">
<ul>
<li>
<Link href="/">
<a>HOME</a>
</Link>
</li>
<li>
<Link href="about">
<a>ABOUT</a>
</Link>
</li>
<li>
<Link href="blog">
<a>BLOG</a>
</Link>
</li>
<li>
<Link href="contact">
<a>CONTACT</a>
</Link>
</li>
</ul>
</div>
<a onClick={openMenu}>
<FontAwesomeIcon icon={faBars} className="bars" />
</a>
</div>