The .div class="main" is starting behind the .div class="header", which is supposed to be a fixed nav bar. I even tried adding a margin-top to the .main and it instead pushes everything down. I am new to coding so please correct me if I am formatting my question incorrectly.
My code snippet:
body {
background-color: black;
font-size: 22px;
color: seashell;
opacity: 0.9;
text-align: center;
}
.header {
text-align: left;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
height: 69px;
}
.nav {
display: inline;
}
.nav p {
display: inline;
float: right;
padding: 1rem;
justify-content: space-around;
margin: 0 10px 0 0;
}
#logo {
text-align: left;
line-height: 0.45rem;
display: inline-block;
height: 2.272rem;
margin-left: 10px;
margin-top: 9.5px;
margin-bottom: 9.5px;
}<div class="header">
<img id="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*knxh9v*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<div class="nav">
<p>
<a href="#">Mission</a>
</p>
<p>
<a href="#">Featured Tea</a>
</p>
<p>
<a href="#">Locations</a>
</p>
</div>
</div>
<div class="main">
<div class="banner">
<div class="mission">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div class="specials">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy</h4>
<div class="teaofmonth">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1vs0a0t*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="teaofmonth">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*x7brc0*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<h4>Spiced Rum Tea</h4>
</div>
<div class="teaofmonth">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*x7brc0*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<h4>Spiced Rum Tea</h4>
</div>
<div class="teaofmonth">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1h8ihzo*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="teaofmonth">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1h8ihzo*_ga*NTgzMjk2NTU5NC4xNjc4MjEzODYy*_ga_3LRZM6TM9L*MTY4MTc3Mzk1Ny4xOS4xLjE2ODE3NzM5OTIuMjUuMC4w">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
<div class="locations">
<h2>Locations</h2>
<div class="shops">
<div #="downtown">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div #="east">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div #="oakdale">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</div>
</div>
</div>
<div class="footer">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
<footer>
<p>copyright The Tea Cozy 2017</p>
</footer>
2
Answers
You need a z-index CSS property to the header element, top property to your main class, and position: relative; to the main class as well.
The top property will help you push the content from the top to where they become visible, the z-index determines what stays on top or under like layers in PhotoShop, and Position: relative accommodates fixed positions.
When an element is fixed in positioning, it takes that element out of the flow of the document, which means it won’t respect the spacing/sizing of the other elements on the page. There are a couple options: