2

I have this fixed positioned button within a absolute positioned wrapper. I would like to align the button within the wrapper but to the right.

Right now I can only align it center within the wrapper or left within the wrapper.

I know the fixed position breaks the flow, but I know it is possible to do this , I just can't figure out to get this working.

Here is the markup:

<div id="nav-container"> <div id="logo-white">LOGO</div> <div class="menuButton">menu</div> </div>

Here is a FIDDLE

Improve this question
1
  • 1
    No, that is not possible. Reference point for fixed positioning is always the viewport. Commented May 17, 2015 at 13:09

4 Answers 4

Reset to default
2

Actually you have pulled the .menuButton div from left and right both to 0 distance so just remove left:0px; and change position to position:absolute; in .menuButton

Working Demo : UPDATED

 .menuButton { height:35px; width: 35px; background: #39C; position: absolute; /* Changed from fixed */ cursor: pointer; z-index: 999; top: 25px; right: 0px; /*left: 0px; ---- REMOVED */ margin: 0px auto; }
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I would like to have the button within the absolute positioned wrapper. In your example it seems like it is outside?
Now just check the updated answer, if still any problem feel free to ask.
now it doesn't seem to be fixed? I need this button to be fixed,
actually not getting what you trying to say. You want that button on same position while scrolling of page? and if so then it will not be in .nav-container div. The .nav-container div will move up while the menu stays at mentioned fixed position
I would like the button to be fixed, but within .nav-container div area that has the green area. Placement of the button should be to the right. Basically how your updated demo is, but just where the button has a fixed position. Does this make any sense?
|
0

Here is your solution to align it right:

 .menuButton { height:35px; width: 35px; background: #39C; float:right; cursor: pointer; z-index: 999; top: 25px; }
Improve this answer

1 Comment

I can just see that you removed the fixed position. The button needs to be fixed.
0

Check this fiddle 

 .menuButton { height:35px; width: 35px; background: #39C; position: fixed; cursor: pointer; z-index: 999; top: 25px; right: 0px; /*left: 0px; removed as its not necessary when right as 0 */ margin: 0px auto; }

I have removed left properties as its not necessary when right set as 0

Improve this answer

3 Comments

I also got this far. I would to have the button aligned with the rest of the content, so is it possible to have the button placed to the right inside the green area of the nav-container and still have the button to be fixed?
If position is fixed. you cannot wrap the content with in the outer container. so its better to change it to relative. so that menu stays in the green area. Note: Position fixed will be always fixed to browser layout not the content layout so you cannot move menu within the container
I have tried to do this with media querries. I now have it excatly as I want. Is this a bad way to do this? jsfiddle.net/9v4o5sjo/8
0

In this FIDDLE I have the setup as I want it to be.

I have have used media queries to get the wanted output.

Please let me know if this is bad pratice?

 .menuButton { height:35px; width: 35px; background: #39C; position: fixed; cursor: pointer; z-index: 999; top: 25px; right: -890px; left: 0px; margin: 0px auto; } @media screen and (max-width: 960px) { .menuButton { right: 25px !important; margin: 0px; left:auto; } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.