I created a nav bar in React and CSS with the following code:
<header className="home-header">
<div className="auth-buttons">
<input type="button" className="auth-button sign-up-button" value="Sign Up" />
<input type="button" className="auth-button login-button" value="Login" />
</div>
<div className="menus-container">
My Site
<span></span>
<span></span>
<span></span>
</div>
</header>
and
.home-header {
position: sticky;
padding: 1.5rem;
margin-top: 0;
min-width: 100vh;
background-color: #1441aa;
border-bottom-right-radius: 30px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.home-header .auth-buttons {
display: flex;
flex-direction: row;
gap: 3px;
/* margin-left: 10%; */
}
.home-header .auth-buttons .auth-button {
padding: 0.5rem 1.5rem;
border: none;
}
.home-header .auth-buttons .auth-button:hover {
cursor: pointer;
}
.home-header .auth-buttons .sign-up-button {
border-bottom-left-radius: 1rem;
}
.home-header .menus-container {
/* margin-left: 60%; */
color: #fff;
font-size: 1.5rem;
font-weight: 400;
}
.home-header .auth-buttons .login-button {
border-top-right-radius: 1rem;
}
But when I make the screen smaller, the right part of the navbar disappears, as shown below:
Full Screen:
Smaller Screen:
I want the nav bar to be responsive and get smaller as the screen gets smaller, not disappear. Could you help me?
2
Answers
It’s because u set
min-width: 100vh;
which referts to the window height. You need to change that tovw
(viewport width) or use%
.In the CSS for
.home-header
,min-width
is sized with thevh
unit rather thanvw
, meaning it will scale according to the height of the screen rather than the width.Change
min-width: 100vh;
tomin-width: 100vw;
.Additionally, your header may get cut off the right side of screen due to its padding. Add the rule
box-sizing: border-box;
so that it will be sized correctly.