Trouble with fixed header on responsive site

[BelindaJ]

I’m using Responsive Pro, (http://wethink.thedesignweb.com.au/ “example”), as soon as I put in position: fixed; top: 0 on the header, the browser window crops a little of the header on the right, all the way down in size as the window gets smaller.

Been looking at it all day and night and nothing seems to fix it.

Is it even possible?

[Paulie_D]

Not seeing any change in Chrome.

Could you give us before & after images?

[BelindaJ]

Not sure how to post images?

Here is a link to see what it’s doing… https://quirktools.com/screenfly/#u=http%3A//wethink.thedesignweb.com.au&w=600&h=1024&a=23&s=1&p=1

it happens when browser is only a little smaller, my dotted lines above and below menu go off screen at right,

And on the link, the black menu is cropped so menu symbol (3lines) missing.

Thanks for replying.

[thechrisroberts]

This is apparently a gotcha of fixed position elements. When you set width: 100%; you expect it to be 100% of the parent element, but elements set to position: fixed; don’t look at the parent element, they look at the viewport. So when you say width: 100%; it will make the width as big as the viewport. If you have padding or margin on the left (which you do) then the element will overflow to the right.

This isn’t a perfect solution, but one option is to add a rule to your 980px breakpoint setting #header { width: 95%; } or some such. I’ve not tried fixed elements in responsive so someone else may have a better workaround.

[thechrisroberts]

Actually I came up with a better way. It’s still a little hacky, but it works much better.

First, move border-bottom: 2px dotted #999999; from #header to .main-nav – you already have border-top in .main-nav, just add the bottom border there too.

Then add this to the styling for #header:

padding: 0 25px;
margin-left: -25px;
box-sizing: border-box;

That fix appears to work at all widths so you won’t need to adjust it for breakpoints, just add it to your global styling.

The box-sizing rule is what makes this trick work. See https://css-tricks.com/box-sizing/ for more on it.

[BelindaJ]

Hi Chris,

Thanks, I managed to fix it also.

I took all of the padding off the container and then just added it in to the wrapper, so now it’s fixed at the top and responsive http://wethink.thedesignweb.com.au/

Seems too simple to have taken me a day and a half!

Thanks for your ideas.

Belinda

[Tom Houy]

If your header was set to 100% width, setting it to “Auto” instead might work too. I believe padding/margins don’t contribute to the overall width when it’s set to “Auto”.

[Author]

Posts