How to use position fixed to cover the full screen width?

user_18302399 0
Viewed 559

I am using position: fixed to fix the name of the website at the top of the page however in doing so the div boundary finishes as soon as the text in the div is completed. It's not covering the complete screen length:

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;">
  <div style="background-color: bisque; margin-top: 0%;  font-family: Copperplate, Papyrus, fantasy; color: black;  text-align: center;">
    &nbsp;
    <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> &nbsp;
  </div>
</nav>

This is how it's working with Fixed: This is how it's working with Fixed:

This is how I want it to get fixed at the top: This is how I want it to get fixed at the top

css-position css html
3 Answers

use 100vw

nav{
  width = 100vw;
}


body{
  height: 200vh;
  background-image: linear-gradient(red, yellow);
}

nav {
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  /*  extra  */
  height: 50px;
  background: red;
  margin-bottom: 0%;
}

.nagi{
  background-color: bisque;
  font-family: Copperplate, Papyrus, fantasy;
  color: black;
  text-align: center;
}
<body>
  <nav>
    <div class="nagi">
      &nbsp;
      <h1>
        <a href="#">Ratnesh Nagi</a>
      </h1> &nbsp;
    </div>
  </nav>
</body>

user_178733040

Set the right and left property to zero.

You can specify the horizontal position of positioned elements using right and left properties. See the snippet below:

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;">
  <div style="background-color: bisque; margin-top: 0%;  font-family: Copperplate, Papyrus, fantasy; color: black;  text-align: center;">
    &nbsp;
    <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> &nbsp;
  </div>
</nav>

user_153726680

You can use flex perhaps as an alternative with some other creative CSS

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  /* force this to full width*/
  align-self: stretch;
  margin-bottom: 1rem;
}

.navbar-content {
  text-align: center;
  background-color: bisque;
  font-family: Copperplate, Papyrus, fantasy;
  color: black;
  /* make it have a size without the &nbsp;*/
  border: 1px solid transparent;
}

.navbar-brand {
  text-decoration: none;
}

.new-thing {
  background-color: #bbdddd;
  /* force this to full width just for fun */
  align-self: stretch;
}
<div class="container">
  <nav class="navbar navbar-light bg-light">
    <div class="navbar-content">
      <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
    </div>
  </nav>
  <div class="new-thing">I am next in line</div>
</div>

user_1259810
Related