This might be a fairly obvious answer, but I don't see anything like this online.
Essentially, I have a responsive navbar that works fine on larger devices. The issue here is with mobile layouts. When I switch to mobile, the entire website is zoomed out like this: https://i.imgur.com/uehxqiQ.png. Removing the line right: -200px; fixes this, but I need to move the content off the screen. Is this zoom behavior nextjs specific, and is there a fix? Thanks!
.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>