'navbar should always be at the top of the viewport'

1

Hello all, I am struggling to clear a project user story as it explains that the navbar should always be located at the top of the viewport, however i am quit confused as the code and the codepen shows that it is at the top of the viewport. The actual codepen console goes onto to explain that it should be at the top even when scrolling but since i need to use flexbox for this task I don’t imagine i am expected to use ‘position: fixed’ on the navbar.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<html>

<head>
  <title>StarWalls - Lightyears ahead</title>
</head>

<body>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://cdn.shopify.com/s/files/1/0023/5431/5327/files/61.6KB_x100.jpg?v=1553920971" alt="star walls logo">
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="section2">
  <video id="video" width="500" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support video.
</video>
  </div>
  <div id="section3">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" name="email" placeholder="Enter email" required>
    <input id="submit" type="submit">
  </form>
  </div>
  <div id="footer">
    <div class="blackbox">
    </div>
    <div class="blackbox">
    </div>
    <div class="blackbox">
    </div>
  </div>

CSS

#nav-bar {
  display: flex;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  list-style: none;
}
.nav-link a {
  display: inline-block;
  padding: 10px 25px;
}
 .blackbox{
  width: 150px;
  height: 150px;
  border-color: black;
  border-style: solid;
}
#footer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 300px;
  align-items: flex-end;  
}
#section2 {
  display: flex;
  justify-content: center;
}
#section3 {
  display: flex;
  justify-content: center;
  margin-top: 100px
}
2

Hello!

You can use flex and still use a fixed position :slight_smile:.

This forum, for example, has a header with position: fixed and one of the children with display: flex, which You can check by using the developer tools (F12 on Firefox and Chrome).

3

Hi I tried doing that before and while it technically passed me on that it kinda breaks the site

the nav links move over to the left for some reason even though the navbar should push the elements to the edge of the navbar.

4

Yes, that happens when You don’t specify a width.

The default display for block elements is display: block. When an element display changes to fixed, they kind of inherit the properties of an inline element, which means they will occupy the maximum space their content use. This means that, if the child elements use, in total, a width of 100px and a height of 30px, then the fixed element will be of 100px x 30px.

When You set the child element flex to use the space-between, the box does distribute the space in between, but since the available space now is reduced to fit the contents, then they seem to be pushed to the left.

To fix it, add a width and height to the header (how much I let You find out :stuck_out_tongue:) .

Take a look at this pen to see Your project working.

Hope it helps :slight_smile:.

5

Thank you so much, helped a lot.

1 Like
6

Happy to help :slight_smile:.

By the way, the script tags should go between <header></header> or, even better, just before the closing </body> tag:

<html>
  <head>
    <title>Test</title>
    <!-- Put script and style tags here -->
  </head>
  <body>
    <h1>My Test Page</h1>

    <!-- Put Your script tags here -->
    <script src="https://cdn.freecodecamp.org/ascript.js"></script>
  </body>
</html>

This is good because the browser loads the content of the page from top to bottom, so, if You put a script at the top (even between the head) it may happen that the script executes before the content is ready, which may break Your web.

Another benefit, is that the user will see some content before sooner, understanding that scripts are, sometimes, a heavy load on Your page.

Hope it helps too :stuck_out_tongue:.

Happy coding!