Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Can’t seem to get the nav-bar to a fixed position on the top of the viewport. I’ve read tons of online material, and in all of them the answer is the same. Set the header position to “fixed”.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://kit.fontawesome.com/56579e3093.css" crossorigin="anonymous">
  </head>
  <body>
    <div id="page-wrapper">
      <header id="header">
        <div class="logo">
        <img id="header-img" src="https://i.ibb.co/N98W5N1/Logo-ancho.png" alt="Logo-Market">
        </div>
        <nav id="nav-bar">
          <ul>
            <li>
              <a class="nav-link" href="#comprar">Comprar</a>
            </li>
            <li>
              <a class="nav-link" href="#vender">Vender</a>
            </li>
            <li>
              <a class="nav-link" href="#nuestras-redes">Nuestras Redes</a>
            </li>
          </ul>
      </header>
      <div class="container"></div>
      <section id="MarketMx">
        <h2>Compra Protegida Siempre</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" id="email" type="email" placeholder="Déjanos tu correo aquí" required>
          <input id="submit" type="submit" value="Enviar" class="btn">
          </form>
      </section>
      <div class="container">
        <section id="comprar">
          <div class="grid">
            <div class="icon">
              <i class="fa fa-3x fa-fire"></i>
            </div>
            <div class="desc">
              <h2>Compra Protegida</h2>
              <p>
Aseguramos que el producto que compres cumpla tus expectativas. De lo contrario, te reembolsamos el dinero de la compra.
              </p>
            </div>
          </div>
          <div class="grid">
            <div class="icon">
              <i class="fa-solid fa-cart-shopping"></i>
            </div>
            <div class="desc">
              <h2>Entregas</h2>
              <p>
Recibes tu producto dentro de 72 horas hábiles posteriores a tu compra
              </p>
            </div>
          </div>
        </section>
        <section id="vender">
          <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
        </section>
        <section id="nuestras-redes">
          <div class="grid">
            <div class="icon">
              <i class="fa-brands fa-instagram"></i>
            </div>
          </div>  
        </section>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    display: block;
}

head {
    display: none;
}

link {
    display: none;
}

body {
    background-color: #323232;
    font-family: 'Lato', sans-serif;
}

.logo {
    width: 60vw;
}

.logo > img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}


header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}


nav {
    display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

right now your logo is above the nav-bar

to change that, you need to set the #nav-bar to absolute positioning and top property should be 0.

4

Thank you. I just tried it using a selector por the #nav-bar referencing the nav-bar ID in my html, still nothing. Maybe you meant using a selector for the nav element with absolute positioning plus top 0?

5

please post the new css

6 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    display: block;
}

head {
    display: none;
}

link {
    display: none;
}

body {
    background-color: #323232;
    font-family: 'Lato', sans-serif;
}

.logo {
    width: 60vw;
}

.logo > img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}


header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}


nav {
    display: block;   
}

#nav-bar {
    position: absolute;
    top: 0
}```
7

sorry but I just noticed that you have not yet linked your stylesheet
(that’s why your css is not having any effect)

1 Like
8

I was slowly going insane, thank you so much hahah!

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.