Hello!
I’m doing the “product landing page” project.
It’s about board games.
As requested, I have my navigation bar at the top of the page, in the header.
There’s my “logo” too.
The problem is that when I click a “navigation link” it takes the user to the appropriate section, but the beginning of the referenced section goes below the header, so you cannot see the first part of the section properly.
It seems like the header and the main sections are overlapped on top of the page. I don’t know how to stack one over the other.
Here is an image of what I mean:
In green is pointed the header height, in blue is the main height, and in the red square is the “nav bar”.
Probably in the code are some things I don’t need, but I spent a few hours trying… first, it is the HTML code, and then the CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<figure>
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Two_red_dice_01.svg/320px-Two_red_dice_01.svg.png" alt="two dice" />
<figcaption id="logo-cap">Table games</figcaption>
</figure>
<nav id="nav-bar">
<ul id="nav-list">
<li class="nav-link"><a href="#video-container">¡Board games video!</li>
<li class="nav-link"><a href="#articles">¡Games you can have!</li>
<li class="nav-link"><a href="#cart">Shipping methods</li>
</ul>
</nav>
</header>
<main>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" placeholder="enter your email" />
<input id="submit" type="submit" />
</form>
<div id="video-container" class="video-container">
<iframe width="auto" height="50%" src="https://www.youtube.com/embed/K4wMQ_4LQV4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<section id="articles">
<div class="caja">
<p>T.E.G (Tactics and Strategy of War)</p>
<img class="picture" src="https://pbs.twimg.com/media/EbYRjuBXkAUfado.png" height="150" />
<p>$100.0</p>
</div>
<div class="caja">
<p>Monopoly</p>
<img class="picture" src="https://d3ugyf2ht6aenh.cloudfront.net/stores/001/055/697/products/juego-de-mesa-monopoly-clasico-hasbro-original-51-f7e20929f2a0c9118415810415634722-1024-1024.jpg" height="150" />
<p>$120.0</p>
</div>
<div class="caja">
<img class="picture" src="https://juegosdemesadivertidos.com/wp-content/uploads/2020/07/91aSSyBeaL._AC_SL1500_-1.jpg" height="150" />
<p>$180.0</p>
</div>
</section>
<section id="shipping-methods"> </section>
<section id="cart"></section>
</main>
</body>
</html>
/* CSS stylesheet =========================================*/
* {
box-sizing: border-box;
}
body{
background-color: #aaaaaa;
margin: 0;
display: block;
}
header {
margin: 0;
display: block;
flex-direction: row;
text-align: center;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
height: 20vw;
width: 100%;
margin: 0;
padding: 0 ;
z-index: 1;
}
#header-img {
max-width: 70%;
margin: 0;
padding: 0;
}
figure {
max-width: 30%;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(150, 50, 200, 0.3);
border-radius: 25%
}
#nav-bar {
position: fixed;
top: 5%;
right: 10%
}
nav li {
list-style-type: none;
text-decoration: none;
}
#form {
padding: 20px
}
main {
display: inline-box;
}
a {
color: black;
text-decoration: none;
text-align: center;
}
nav, ul {
padding: 0;
text-align: center;
align-items: center;
}
@media only screen and (max-width: 480px) {
header {
flex-direction: column;
align-items: center;
margin: auto;
}
}