Fixed header overlapping page content

Alice6
Shopify Partner
22 0 1

Hello!

I would like to make my website's https://www.italianwineconnection.com.au header fixed for all pages.

I've managed to achieve this by adding the below to the styles.scss file:

.header{
position: fixed;
background-color: #333232;
width: 100%;
z-index: 101;
}

This makes my header fixed (yay!) but unfortunately it also overlaps the first few lines of text on every page.

What am I doing wrong?

I use the Mobilia theme.

Thanks :)

Alice

0 Likes
tim
Shopify Expert
2927 143 1039

Hi Alice,

that is an expected behaviour -- as soon as you make an element fixed, it is not longer accounted for when laying out the rest of the page, so the next element is effectively shifted up.

You need to compensate for the height of the element you've fixed.

You can add a CSS rule like this:

#shopify-section-header + * { /* target the element which follows the shopify-section-header*/
    padding-top: 188px;
}

But the problem is that as the screen gets narrow, some header elements may wrap making the header higher and obscuring the top of the following element :(

You can either ignore it, or invent several media-queries to change this padding-top, or add some javascript to change the padding-top on window resize...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
lousophia
New Member
1 0 0

thank you, i have been trying to find a solution for a while and this is the only one that worked

0 Likes