CSS: how to create a fixed top header with a fixed width - css

Question

I have following fixed top header using this class:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Now, I would like to have a fixed width 840px, not 100% and centered as shown in this JSFiddle example.

Answer 1

You can use a dynamic solution, using transform: translateX(-50%) - (demo on JSFiddle):
.sticky {
left:50%;
position:fixed;
top:0;
transform:translate(-50%);
width:840px;
z-index:100;
}
I wouldn't recommend to use a static solution but you can use it too (demo on JSFiddle):
.sticky {
left:calc(50% - 420px);
position:fixed;
top:0;
width:840px;
z-index:100;
}
Why you should avoid a static solution?
You can define many items like this to set the position of these, but if you change the width in future you have to change the static part of the CSS definitions too. You can't totally avoid using static parts on CSS but you can minimize them!

Answer 2

.sticky {
position: fixed;
width: 840px;
margin-left: -420px
left: 50%;
top: 0;
z-index: 100;
border-top: 0;
}
This is the solution.

Answer 3

Have you try something like this ?
HTML :
<div class="sticky-container">
<div class="nav sticky">
Navigation
</div>
</div>
CSS :
.sticky-container {
position: fixed;
width: 840px;
left: 50%;
top: 0;
z-index: 100;
border-top: 0;
}
.sticky {
position:relative;
left:-50%;
top:0;
}

Answer 4

If you change your .sticky class to the below:
.sticky {
margin:auto;
width: 840px;
z-index: 100;
border-top: 0;
}
and remove that top margin on body:
body {
margin: 0 0 0 0 !important;
padding: 0;
}