Finished my navbar on PC and shared the code to my iPhone to view in both landscape and portrait. In the landscape, the navbar was overflowing on the right side. Added env(safe-area-inset) values for non-obstruction purposes view, but overflowed on the right side. Can’t seem to find the problem.
iPhone (11 Pro Max) Landscape Orientation
The left gap is the safe area env() but the right safe area gap is overflowed by the navbar.
Here is the following code:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
font-family: "Montserrat", sans-serif;
text-align: center;
}
body {
background: white;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
}
.nav-bar {
display: flex;
justify-content: space-between;
padding: 0 2rem;
height: 50px;
align-items: center;
background: #0f0f0f;
color: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.hamburger {
display: none;
}
.hamburger i {
color: white;
font-size: 25px;
padding: 5px 7px;
border-radius: 5px;
}
.hamburger i:hover {
color: white;
background: rgb(69, 69, 69);
}
.nav-bar .nav-items {
display: flex;
margin-top: 4px;
align-items: center;
}
.nav-bar .nav-items li a {
user-select: none;
font-weight: bold;
display: block;
color: white;
font-size: 20px;
padding: 4px 10px;
transition: 150ms;
-webkit-transition: 150ms;
-moz-transition: 150ms;
margin: 0 10px;
}
.nav-bar .nav-items li a:after {
display: block;
content: "";
border-top: 2px solid rgb(140, 73, 255);
transform: scaleX(0);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transition: transform 150ms ease-in-out;
-webkit-transition: transform 150ms ease-in-out;
-moz-transition: transform 150ms ease-in-out;
}
.nav-bar .nav-items li a:hover:after,
.nav-bar .nav-items li a.active:after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
}
.nav-bar .nav-items li a:hover {
filter: brightness(85%);
-webkit-filter: brightness(85%);
}
.nav-bar .login-register {
display: flex;
flex-direction: row;
}
.nav-bar .login-register .button {
user-select: none;
margin-bottom: 4px;
color: #fff;
font-size: 20px;
border: 2px solid rgb(116, 36, 255);
padding: 4px 20px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
transition: all ease-in 0.2s;
-webkit-transition: all ease-in 0.2s;
-moz-transition: all ease-in 0.2s;
}
.nav-bar .login-register .button:hover {
background: rgb(116, 36, 255);
}
/*works fine | small res mobile view*/
@media only screen and (max-width: 850px) {
.hamburger {
height: auto;
display: block;
cursor: pointer;
}
.hamburger i {
width: 35px;
height: 35px;
background: #0f0f0f;
}
.nav-bar .nav-items {
flex-direction: column;
position: fixed;
width: 20vw;
background: #383838;
padding: 1.5rem 0;
height: 280px;
top: 46px;
z-index: 99;
right: -100%;
transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
}
.nav-bar .nav-items li a {
font-size: 20px;
padding: 0 10px;
margin: 10px 0;
}
.nav-bar .nav-items.active {
right: 0;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<navbar class="nav-bar">
<div class="logo" onclick="window.location.href='Home.html'">TEST LOGO</div>
<div class="hamburger" for="check">
<i class="fa-solid fa-bars"></i>
</div>
<ul class="nav-items">
<li>
<a href="#" class="active">Home</a>
</li>
<li>
<a href="#">Explore</a>
</li>
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="#">About</a>
</li>
<div class="login-register">
<a href="#" class="button">Login</a>
</div>
</ul>
</navbar>
A friend and I tried different changes like margin-padding, align-items, list-style, overflow, display, width/max-width properties. All resulted in displacing or wrong sizing the content inside the navbar.
2
Answers
I finally found the issue with the overflowing navbar, it was supposed to be a position: sticky value in the .nav-bar.
I tried your code, no sidebar appears
I advise you, if you are using the live server, to refresh the page several times