Hi everyone.
I’m having an issue with the Product Landing Page project. All of the tests pass but it doesn’t look how I’d like it to.
My issue is that when I click on ‘Shop’ it takes me to it but I can only see the bottom because the Navigation Bar and Header are in the way. I’ve added a margin to the top of the body and when it loads it loads at that margin but it doesn’t when I click the link.
Here’s my code from the header to the end of the Shop section (sorry it’s bad I’m very new!)
HTML for this part:
<header id="header">
<div id="page-header">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#shop">Shop</a></li>
<li><a class="nav-link" href="#tips">Tips</a></li>
<li><a class="nav-link" href="#subscribe">Subscribe</a></li>
</ul>
</nav>
<img id="header-img"
src="https://yt3.ggpht.com/lslYF2qJivNhMUsVKrrNFtORNGXLeBQMSX6mE_8qA8PMMTICR52uMjgXMzpHmQXYiOQTcoQVCdI=w2560-fcrop64=1,00005a57ffffa5a8-k-c0xffffffff-no-nd-rj"
alt="loco-skates-logo"/>
<h2>Skates delivered to your doorstep</h2>
</div>
<hr>
</header>
<body>
<div>
<section id="shop">
<h3>Shop</h3>
<h4>Coming soon...</h4>
<p>Subscribe for notifications on when our shop is LIVE</p>
</section>
</div>
CSS for this part:
header {
font-family: 'Fondamento', cursive;
font-size: 20px;
position: fixed;
top: 0px;
}
#header-img {
height: relative;
margin-top: -80px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
z-index: -1;
}
nav {
font-weight: 300;
}
nav > ul {
width: 20%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 20px;
}
a {
color: #FFF;
z-index: 1;
text-decoration: none;
}
body {
background-color: #000;
margin-left: 0px;
margin-top: 300px;
}
h2 {
display: block;
background-color: black;
padding: 10px;
color: white;
text-align: center;
margin-top: 0px;
font-family: 'Fondamento', cursive;
fon-size: 20px;
}
#shop {
color: #FFF;
text-align: center;
font;family:'Fondamento', cursive;
font-size: 50px;
}
h4 {
color: #FFF;
text-align: center;
font-family: 'Bangers', cursive;
}
p {
color: #FFF;
text-align: center;
font;family:'Fondamento', cursive;
font-size: 30px;
padding-bottom: 100px;
}
Here’s a screenshot of when I click “Shop”, you can see the bottom of that section “subscribe for notifications”… etc but not the part above it with the header. (it says SHOP COMING SOON" above this but I can only upload 1 image as I’m new!
I hope you guys can help me out!
Thanks in advance!