0
521
ViewsHow to use position fixed to cover the full screen width?
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;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>This is how it's working with Fixed:
This is how I want it to get fixed at the top:
·
Santiago Trujillo
3 answers
Answer question0
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">
<h1>
<a href="#">Ratnesh Nagi</a>
</h1>
</div>
</nav>
</body>
·
Santiago Trujillo
Report
0
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;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
·
Santiago Trujillo
Report
0
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 */
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>
·
Santiago Trujillo
Report
Answer question