CODEWITHSUNDEEP
csspositionmargin
Jared
Jared

Reputation: 471

CSS position fixed AND margin 0 auto

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?

Upvotes: 9

Views: 20839

Answers (4)

Moussawi7
Moussawi7

Reputation: 13279

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;
}

Upvotes: 23

Catalin Enache
Catalin Enache

Reputation: 778

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

Upvotes: 5

user3076049
user3076049

Reputation:

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.

Upvotes: 0

bhamner
bhamner

Reputation: 447

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>

Upvotes: 0

Related Questions