"Position: fixed" in CSS changes "justify-content-end"

Question

I'm trying to make a navigation bar with the content on the right of the page. This worked until I added position:fixed in CSS. After I added position:fixed, the content got relocated to the left of the page. Can someone tell me why this happened?

.header {
  position: fixed;
}

<div class="header">
  <ul class="nav nav-pills justify-content-end">
    <li class="active"><a data-toggle="pill" class="nav-link active" href="#">About</a></li>
    <li> <a data-toggle="pill" class="nav-link" href="#">Portfolio</a></li>
    <li><a data-toggle="pill" class="nav-link" href="#">Contact</a></li>
  </ul>
</div>

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. https://www.w3schools.com/css/css_positioning.asp — tech2017, Jun 08 '17 at 19:29

score 0 · Answer 1 · answered Jun 08 '17 at 19:37

0

position: fixed; = "Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page..." (source: https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=control)

Not sure what you want the final outcome to be, but check out your other positioning options: static, relative, absolute, fixed, sticky.

answered Jun 08 '17 at 19:37

BoulderBrains

1
2

Welcome to SO! The OP wanted it on the right _I'm trying to make a navigation bar with the content on the right of the page._ – Syfer Jun 09 '17 at 01:48

score 0 · Answer 2 · answered Jun 08 '17 at 19:41

https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=control

Fixed: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. [...]

The specified position by default will be at the top/left of the screen without any additional positioning in the CSS. To move it around, use the top left right bottom properties. To move it to the right, specify a value for right that matches the distance you want the menu to be from the right side of the page.

.header {
  position: fixed;
  top: 1em; right: 1em;
}

<div class="header">
  <ul class="nav nav-pills justify-content-end">
    <li class="active"><a data-toggle="pill" class="nav-link active" href="#">About</a></li>
    <li> <a data-toggle="pill" class="nav-link" href="#">Portfolio</a></li>
    <li><a data-toggle="pill" class="nav-link" href="#">Contact</a></li>
  </ul>
</div>

score 0 · Answer 3 · answered Jun 08 '17 at 19:49

Add right: 0px to the header css (or however many pixels from the edge you want it).

.header {
  position: fixed;
  right: 0px
}

<div class="header">
  <ul class="nav nav-pills justify-content-end">
    <li class="active"><a data-toggle="pill" class="nav-link active" href="#">About</a></li>
    <li> <a data-toggle="pill" class="nav-link" href="#">Portfolio</a></li>
    <li><a data-toggle="pill" class="nav-link" href="#">Contact</a></li>
  </ul>
</div>

"Position: fixed" in CSS changes "justify-content-end"

3 Answers3