CSS position fixed AND margin 0 auto

Question

So I have a background image with the following css:

 body{
    background-image:url(cover.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

And the background image is 1280 px in width. So I want my navigation bar fixed and centered with the background. However Im running into issues. Here is my code.

#navigation {
margin: 0 auto;
position:fixed;
top: 0;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
}

But the navigation bar will be fixed but not centered. If I remove the fixed, it will center it but then its not fixed.

Any ways to accomplish this?

possible duplicate of [Position absolute and margin: auto](http://stackoverflow.com/questions/15961232/position-absolute-and-margin-auto) — essmahr, Feb 27 '14 at 21:38

score 23 · Accepted Answer · edited Nov 29 '16 at 17:14

23

you can make the following

#navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}

edited Nov 29 '16 at 17:14

Community

1
1

answered Feb 27 '14 at 21:47

Moussawi7

12,359
5
37
50

width:100% works too! so nice. i added padding to the relatively positioned element beneath it that folded up after doing this. – WEBjuju Dec 09 '19 at 01:31

score 4 · Answer 2 · answered Jul 22 '14 at 17:02

4

.fixed-centered {
    position: fixed; 
    left: 50%;
    transform: translate(-50%);
}

answered Jul 22 '14 at 17:02

Catalin Enache

758
1
10
17

score 0 · Answer 3 · 2014-02-27T21:47:39.093

0

Create .container div with style:

//no float!
width:960px;
possition:relative;
margin:0; //centers

Then withing this container create fixed navigation bar :)

position:fixed;
float:left;
width:100%;
height:50px;

So now navigation bar sticks in the centered container.

Only thing you might need to edit on this code is top.

edited Feb 27 '14 at 21:47

answered Feb 27 '14 at 21:42

score 0 · Answer 4 · answered Feb 27 '14 at 21:46

Fixed and auto are 2 different things, you can't call them both together. A better solution would be to make a container div, center it using margin:0 auto, add your background code from the body to it and take it off the body, then make another div and put your navigation in there. You may also want to set a height on that container div.

<div class="container">
   <div class="nav">
       <!-- nav here -->
   </div>
</div>

CSS position fixed AND margin 0 auto

4 Answers4