Help with making a sticky Header

[TomDLondon]

Hi I am trying to make a sticky header, so my cart and search options are always visable on my site. 

I don't have this option on my theme 

Can anyone advise? 

sugarboxuk.com

[BSSCommerce-HDL]

Hi @TomDLondon, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (min-width: 768px) {
div#pageheader {
    top: 26.55px;
    left: 0;
    position: fixed !important;
    width: 100vw;
}

.announcement {
    position: fixed !important;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 1;
}

div#main-nav {
    position: fixed !important;
    top: calc(90px + 26.55px);
    left: 0;
    width: 100vw;
    z-index: 1;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[TomDLondon]

Thanks so much, this has helped
The header is now locked, but the announcement bar and Menu Navigation is being covered by some products when I scroll, see the the examples in the screenshots provided. Any ideas how to avoid this? 

It also isn't locked on the mobile version of the website 

[BSSCommerce-HDL]

Hi @TomDLondon, Pls change 1 -> 99:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[TomDLondon]

This is perfect
Thank you so much for the help

The only 2 issues I have now are 

1: The head has moved lower, and is covering the top of the rest of my page and cutting off content. See attahced screenshots for reference

As well as the floating menu not working any more

2. This doesn't behave the same on the mobile version of the website, only the desktop 

[BSSCommerce-HDL]

@TomDLondon, This code for mobile: 

<style>
@media only screen and (max-width: 767px) {
div#pageheader {
    top: 26.55px;
    left: 0;
    position: fixed !important;
    width: 100vw;
}

.announcement {
    position: fixed !important;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 99;
}
div#store-messages-mobile {
    position: fixed;
    width: 100vw;
    top: calc(53px + 26.55px);
    z-index: 99;
}
}
</style>

Hope this can help you 😍

[BSSCommerce-HDL]

@TomDLondon, This code fix part slider image cut off for mobile and desktop: 

<style>
@media only screen and (max-width: 767px) {
.shopify-section:has(.slideshow-row) {
    margin-top: 110px;
}
}

@media only screen and (min-width: 768px) {
.shopify-section:has(.slideshow-row) {
    margin-top: 139px;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍