Fixed Positioned Header Persists on Desktop But Not on Mobile

Fixed positioned header persists on desktop but not on mobile?

I'm not sure why, but I had to add this:

  <meta content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no' name='viewport'>

Fixed header not fixed when there is horizontal overflow

I fixed it by setting overflow: auto on both html and body.

EDIT: doing that makes the header go over the scrollbar.
The actual fix is adding user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>

See this answer

Fixed header is over scrollbar

I removed overflow: auto from body and added user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>. That does the trick.

See this answer

Entire body tag skewing to the left on mobile, other elements not affected

SOLVED:

There were elements in the code that were forcing the layout be too wide.

The first problem was the 'hr' tag in the clinical work div.

Also the margins on the hero text were not responsive.

Solution:

Adding in responsive sizing to the hr tag in CSS.

Set the width of the hero__text to a percentage of the screen and then center it horizontally with transform:translate.

transform: translate(-50%);
margin-left: 50%; 

How do I prevent mobile interface header from overlapping with the content while ensure the content stays below the interface at all times?

If I understood, correctly, you want to ensure that when a link is clicked within the header and the page animates, that the header does not overlay with the content of the section that it scrolls to.

If that's the case, then simply subtract the height of the header, for instance:

'scrollTop': $target.offset().top-$('.dock-top').height()

You may need to experiment with other offset integers given your current CSS markup, but this should put you in the right direction.

jsFiddle

---

Related Topics