# \#Layout- 1. The navbar should always be at the top of the viewport

**URL:** <https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537>\
**Category:** General\
**Created:** [August 16, 2020, 1:05am UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537 "2020-08-16T01:05:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcouyoute1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mcouyoute1/32/134653_2.png) [@mcouyoute1](https://forum.freecodecamp.org/u/mcouyoute1)\
**Post date:** [August 16, 2020, 1:05am UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537/1 "2020-08-16T01:05:37Z")

</div>

I don’t know what else to do. Can some check my work?

> **[Fork Me! FCC: Home Boxing Equipment](https://codepen.io/mcouyoute/pen/mdPeNgm?editors=1100)**
>
> ...

---

<div class="post-metadata">

**Author:** ![razzakammar\_nano](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/razzakammar_nano/32/125270_2.png) [@razzakammar\_nano](https://forum.freecodecamp.org/u/razzakammar_nano)\
**Post date:** [August 16, 2020, 2:40am UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537/2 "2020-08-16T02:40:40Z")

</div>

You need to add position of absolute, then adjust padding everywhere else.

```css
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

```

---

<div class="post-metadata">

**Author:** ![eoja](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/eoja/32/135387_2.png) [@eoja](https://forum.freecodecamp.org/u/eoja)\
**Post date:** [August 16, 2020, 3:16am UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537/3 "2020-08-16T03:16:12Z")

</div>

To your nav element you need to add:

position: fixed;  
top: 0;  
left: 0;

Also , I would recommend taking your nav element out of your header element and putting it above the header. Also add to the nav width 100% if you want it across the entire top screen.

---

<div class="post-metadata">

**Author:** ![mcouyoute1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mcouyoute1/32/134653_2.png) [@mcouyoute1](https://forum.freecodecamp.org/u/mcouyoute1)\
**Post date:** [August 17, 2020, 5:23pm UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537/4 "2020-08-17T17:23:04Z")

</div>

Thanks for the help! I complety forgot about positioning. I still had to keep the nav within the header section in order to pass.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:43pm UTC](https://forum.freecodecamp.org/t/layout-1-the-navbar-should-always-be-at-the-top-of-the-viewport/415537/5 "2021-06-01T18:43:20Z")

</div>

Closed on June 1, 2021, 6:43pm UTC