Gap between my header and the top of the page when scrolling down

Store Design
, ,
1

Hey guys, for some reason when I have my sticky header enabled which i need, on desktop when scrolling down there is a gap between the header and the top of the page. Can anyone help fix this please?

Dccomputers_0-1669200195305.png
Dccomputers_0-1669200195305.png1335×233 77.8 KB

https://directcomputers.co.uk/

All the best

DC

2

Hi @Dccomputers

Please add this Css in your Css file

.site-header-sticky .site-header{
  top:-10px!important;
}
3

Hey thank you the only issue now is the items in the box are right at the top can you help with that please?

Dccomputers_0-1669203741369.png
Dccomputers_0-1669203741369.png1880×316 115 KB

4

not understand you question!!

5

The items inside the header like the logo search bar etc, is now pushed to the top of the div I think it needs some padding but unsure. Do you understand?

https://directcomputers.co.uk/

Dccomputers_0-1669203980346.png
Dccomputers_0-1669203980346.png1880×338 119 KB

6

Yes @Dccomputers

7

@Dccomputers Please add this css

@media screen and (min-width: 1024px){
.site-header-sticky--scrolled .site-header-main {
    padding-top: 20px!important;
    
}}
8

@Dccomputers This look like this https://prnt.sc/OVpFo78p5O2z

if this work please accepted as solutions

9

Hey the issue now is the icons i’ve circled here are now floating out of position also if you check mobile view as well -

Dccomputers_0-1669205238955.png
Dccomputers_0-1669205238955.png1468×292 196 KB

10

hi @Dccomputers

Please add this Css

.site-header-menu-toggle--button{
    padding-top: 25px!important;
}

.site-header-cart--button{
    padding-top:10px!important;
}
@media screen and (max-width: 767px){
    .site-header-menu-toggle--button{
        padding-left: 10px!important;
    }
    .site-header-mobile-search-button--button{
        padding:20px 6px!important;
    }
}
11

I’ve applied those but it doesn’t seem to have helped if you check

12

Please reload this it working fine

13

It should look like this on desktop:

Dccomputers_0-1669206220580.png

Then this on mobile

Dccomputers_1-1669206243764.png
Dccomputers_1-1669206243764.png434×854 191 KB

14

Yes !!

15

What you want here!! it’s working fine in all the media

16

The top bar now looks like this:

Dccomputers_0-1669206401014.png
Dccomputers_0-1669206401014.png1926×447 323 KB

But it should look like this:

Dccomputers_1-1669206420482.png

17

@Dccomputers https://prnt.sc/BZyAh48UEP3j

please check now it’s prefect?

if this is perfact please replace this code

@media screen and (min-width: 1024px)
.site-header-sticky--scrolled .site-header-main {
    padding-top: 14px!important;
    padding-bottom: 6px!important;
}
18

I fixed it I added:

.site-header-wrapper {

padding-top:10px;

}

This solved everything!

Thanks for the help!