The first question is what do you want it to look like at smaller widths?
You say ‘it pushes the content down’ which doesn’t seem like an issue to me but do you instead mean that you don’t want the menu to break to two lines?
I see you have removed the toggle so I assume you just want the 4 items across so you can do that with something like this:
@media screen and (max-width: 769px){
.hero-nav{
padding: 1rem;
Justify-content:space-around;
}
.hero-section-container .hero-nav a{
font-size: 1.2rem;
margin:1rem 0;
padding:.5em 1em;
}
.active3 span{display:none;}
}
@media screen and (max-width: 470px){
.hero-section-container .hero-nav a{
font-size: 1.1rem;
margin:1rem 0;
padding:.5em;
}
}
I added a span around the word ‘US’ in the active3 nav item so that small screens just get 'CONTACT.
<a class="active3" href="#">Contact <span>Us</span></a>
This avoids the word wrapping and keeps it all on one line. The above changes will scale right down to 320px now. However they are a little tight and you may indeed want to implement a hamburger from about 420px and downwards.
Note that you probably want to decrease the vertical margins on your content so they move upwards on smaller screen but a better approach would have been to let flexbox automatically centre it in the available space. In that way the content will move depending on height available without magic margin numbers.
You have used height:100% on the container which means your page will never be bigger than a viewport. That’s a big mistake and you should use min-height instead as the page has to grow with content or text zoom. Avoid fixed heights on containers that hold text content.
Your box-sizing rules is incorrect as you have stated the property as the value. I think you meant box-sizing:border-box
. However you would be better off using the more efficient and better targeted version as below.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
I would avoid using this:
*{
margin: 0;
padding: 0;
}
That will break a lot of form elements. It’s fine for demos but heavy handed for a real site. Instead I suggest you set the default margin and padding that you need for the elements you use.
This has flexbox added for the main container to space out the content automatically.
/* =======================
Global style
======================= */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
background-color: #eefbff;
margin: 0;
padding: 0;
}
/* =======================
L A Y O U T
======================= */
/* hero-section*/
.hero-section-container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #1d3d4d;
background-image: url(/Images/landscape-photo-of-road-in-the-middle-of-mountains-696680.jpg);
background-blend-mode: multiply;
min-height: 100vh;
background-position: center;
background-size: cover;
}
.hero-nav {
display: flex;
justify-content: flex-end;
padding: 1.5rem;
}
.hero-nav a {
font-size: 1.8rem;
color: white;
text-decoration: none;
text-transform: uppercase;
margin: 2rem;
font-weight: 500;
letter-spacing: 2.4px;
}
.hero-nav a {
border: 0.5px solid #ff9500;
border-radius: 15px;
padding: 0.5rem;
}
.hero-nav a:hover {
color: #ff9500;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*margin-top: 7rem;*/
margin: auto 0;
}
.hero-content > h1 {
font-size: 5rem;
font-family: "Muli", sans-serif;
color: white;
padding: 1.2rem;
border: 2px solid white;
border-radius: 15px;
font-weight: normal;
margin: 1rem 0 2rem;
}
.hero-content h1 span {
font-weight: bold;
color: #ff9500;
}
.hero-content > p {
font-size: 2.2rem;
font-family: "Muli", sans-serif;
color: white;
margin: 1rem 1.5rem;
}
.hero-content > p span {
color: #ff9500;
}
#tag-line {
font-size: 1.9rem;
font-family: "Muli", sans-serif;
letter-spacing: 0.3rem;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
@media screen and (max-width: 769px) {
.hero-nav {
padding: 1rem;
justify-content: space-around;
}
.hero-nav a {
font-size: 1.2rem;
margin: 1rem 0;
padding: 0.5em 1em;
}
.active3 span {
display: none;
}
}
@media screen and (max-width: 470px) {
.hero-section-container .hero-nav a {
font-size: 1.1rem;
margin: 1rem 0;
padding: 0.5em;
}
}
I forked your pen and put back in place the hamburger toggle for smaller screens.
This was only a quick re-write so may have missed a few things but should give you some good clues 