Converting a default navigation bar into a sticky/fixed navigation bar? - html

Question

I am having trouble turning my normal navbar into a sticky one. When I don't set the position as fixed, the navbar looks and works fine. But when I make the position fixed, it glitches out and looks wonky, and I have examples of both down below. My HTML and CSS are here too:
body {
margin: 0px;
padding: 0px;
font-family: 'Arial', serif;
}
header {
position: fixed;
}
p {
line-height: 200px;
}
.navbaratta {
background-color: #E9B63C;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
margin-top: 0;
}
.navbaratta>li {
display: inline-block;
padding-right: 70px;
border-right: 1px solid #000;
margin-right: 70px;
}
.navbaratta>li>a {
text-decoration: none;
color: #1A1A1A;
font-weight: bold;
}
.navbaratta>li>a:hover {
color: #474747;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.LogoDiv {
background-color: #1A1A1A;
width: 100%;
}
li.HOME {
border-left: 1px solid #000;
padding-left: 70px;
}
<header>
<div class="LogoDiv">
<img src="NavBarFinal.png" class="Logo">
</div>
<ul class="navbaratta">
<li class="HOME">HOME</li>
<li>BIOGRAPHY</li>
<li>CONTACT US</li>
<li>PHOTO GALLERY</li>
</ul>
</header>
with position fixed:
without position fixed:

Answer 1

The header is not taking the complete width. So, just update your header CSS.
header {
position: fixed;
width: 100%; // Added
}

Answer 2

You need to add positional properties when you fix a div or alternatively you give it a width. I usually prefer first approach. So use it as below will solve your problem.
Your problem caused by using element with relative positioning which is displayed as block so it takes width of parent element when it is relative. So you dont care its width since its parent is body. However when you change it to fixed positioning there is nothing in terms of reference so it wraps content thats all. By entering left:0 and right:0 you stretch it to whole screen. You also need to add a padding top to your body element. Otherwise some parts of your text will be displayed behind navbar. I hope it helps
header {
position: fixed;
left: 0;
right: 0;
}