# Navbar position

**URL:** <https://forum.freecodecamp.org/t/navbar-position/451501>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [March 17, 2021, 12:44am UTC](https://forum.freecodecamp.org/t/navbar-position/451501 "2021-03-17T00:44:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![akretchakre](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/akretchakre/32/183056_2.png) [@akretchakre](https://forum.freecodecamp.org/u/akretchakre)\
**Post date:** [March 17, 2021, 12:44am UTC](https://forum.freecodecamp.org/t/navbar-position/451501/1 "2021-03-17T00:44:35Z")

</div>

Hey guys, I would like to know if someone can point to me how I can put the navbar above the header on my pen for the product landing page project.  
Here is the link: [https://codepen.io/darrylat/full/bGBaYKy](https://codepen.io/darrylat/full/bGBaYKy)

---

<div class="post-metadata">

**Author:** ![ORACLE](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/oracle/32/209900_2.png) [@ORACLE](https://forum.freecodecamp.org/u/ORACLE)\
**Post date:** [March 17, 2021, 1:08am UTC](https://forum.freecodecamp.org/t/navbar-position/451501/2 "2021-03-17T01:08:31Z")

</div>

Try this:

```auto
#nav-bar ul {
 background: rgba(0,0,0,0.4);
  position: fixed;
  top: 0;
}

#nav-bar li a{
	color: #fff;
  font-size: 16px;
  font-weight: bolder;
}

```

oh, also remember to start you css with the your html elements in order, so nav, then header then sections respectively. It just makes your code a little easier to read and debug.

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [March 17, 2021, 1:16am UTC](https://forum.freecodecamp.org/t/navbar-position/451501/3 "2021-03-17T01:16:44Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![ORACLE](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/oracle/32/209900_2.png) [@ORACLE](https://forum.freecodecamp.org/u/ORACLE)\
**Post date:** [March 17, 2021, 7:19am UTC](https://forum.freecodecamp.org/t/navbar-position/451501/4 "2021-03-17T07:19:29Z")

</div>

Thank you, lol - did’nt know this before 😅

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 15, 2021, 7:19pm UTC](https://forum.freecodecamp.org/t/navbar-position/451501/5 "2021-09-15T19:19:51Z")

</div>

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