Gap between sticky menu and top of the screen (Dawn Theme)

[JH_TECH]

Hello Shopify Community,

On our page, when one is scrolling up, there is gap between the sticky menu and the top of the screen. This gap also appears when the menu is pressed to see more options. Do you know how we can fix this issue? Here you can see the code for the sticky menu and its shadow, as it appears on our base.css file.

Here you can see how it appears on our page when a gap between the menu bar and the top of the screen is created.

We are using the Dawn theme. Our page url is: jacqueshermes.com

Any advise will be appreciated.

Thank you for your time,

Jacques Hermes Team

[PageFly-Victor]

Hi @JH_TECH

This is PageFly - Advanced Page Builder. I would love to give you my suggestion.

Please try setting the value below to 0:

I hope my suggestion will be helpful to you.

Best Regards,

PageFly

[JH_TECH]

Hello @PageFly-Victor ,

your suggestion solves the scrolling up problem but when scrolling down the menu disappears.

Here you can see how the page looks when we are scrolling up

and here you can see how it looks when we scroll down

[PageFly-Victor]

Hi @JH_TECH

Please try adding this code:

.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
top: 65px !important;
}

Cheers!

[JH_TECH]

@PageFly-Victor This addition fixes the problem on the desktop version, but some issues remain on the mobile one. The gap appears when scrolling down on collection and product pages. Here you can see some screenshots of this.

Edit: the gap also appears when we press the menu for more details on the mobile version.

[gr_trading]

Hi @JH_TECH ,

Seems custom CSS added in base.css creating issues in mobile.

I would request to change your existing CSS with provided below one. Hope it will help.

@media(max-width:768px){
.shopify-section-header-hidden {
    transform: none !important;
}
}

@media(min-width:768px){
.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
    top: 64px !important;
}
}

[PageFly-Victor]

Hi @JH_TECH

Sorry for the late reply. Please try replacing the piece of code that has the 65px with this one:

@media(min-width:1024px) {
.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
top: 65px!important;
}
}@media(max-width:1024px) and (min-width:768px){
.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
top: 100px!important;
}
}
@media(max-width:767px){.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
top: 50px!important;
}}

I hope this will help!

[JH_TECH]

Hello @gr_trading ,

This code solves the problems that were stated above, but creates a new one. On the mobile version, when one is scrolling down on the home page the menu is not fully shown. When scrolling up, we can see the complete menu, but the Google reviews on the bottom left are cut in half. You can see those issues on the screenshots bellow.

Thank you for your reply,

Jacques Hermes team

[JH_TECH]

Hello @PageFly-Victor ,

This solves the problems that were stated above, but creates a new one. On the mobile version, when scrolling down on the home page the menu is not fully shown. When scrolling up, we can see the complete menu, but the Google reviews on the bottom left are cut in half. You can see those issues on the screenshots bellow.

Thank you,

Jacques Hermes team

[PageFly-Victor]

Hi @JH_TECH

Please set this value below to 127px. It should fix the issue.

Cheers!

[JH_TECH]

With this change, when scrolling up, the menu is fully visible but the Google reviews are cut in half. When scrolling down the Google reviews are 100% visible but there is a gap between the menu bar and the top of the screen. You can see those issues on the screenshots bellow

Thank you @PageFly-Victor ,

Jacques Hermes team

[gr_trading]

Hi @JH_TECH ,

Please replace below code

.shopify-section.section-header.shopify-section-header-hidden.shopify-section-header-sticky {
    top: 127px!important;
}

and update it with

.shopify-section.section-header.shopify-section-header-sticky.shopify-section-header-hidden {
    top: 72px !important;
}

For google ratting object, please update the value of left and bottom to 24px of class ratings_and_recomindations_JDSFBKSDJ12222.

Code will be like

.ratings_and_recomindations_JDSFBKSDJ12222{left: 24px; bottom: 24px;}

[JH_TECH]

Hello @gr_trading ,

We applied those changes but there were some problems so we restored the code to its previous version. Here you can see a screenshot of the menu bar related css code. Now the shadow of the menu bar is also not visible. We hope this will help you spot the issue.

Thank you,

Jacques Hermes team

[JH_TECH]

Here you can see a screenshot of the current version of our css code that is related to the menu bar and its shadow. We hope this will help you spot the issue.

Edit: Now the shadow of the menu bar is also not visible.

Thank you @PageFly-Victor ,

Jacques Hermes team

[gr_trading]

HI @JH_TECH ,

May I know what’s you actual problem for which you write this whole CSS to solve?

[JH_TECH]

Our goal was to have a menu bar that will remain visible when scrolling down and up in all of our pages both on mobile and desktop versions. We also wanted this menu bar to have a shadow.

This code is the result of multiple attempts to fix issues such as the menu not being at the top of the screen when scrolling up or down, the menu not being 100% visible when scrolling on mobile, the menu only appearing when scrolling up, the menu appearing as desired but resulting in cropping the Google reviews asset on the bottom left. Since now this has become big and confusing, we will highly appreciate it if you can come up with a code alternative to replace all of this with something that will fulfill the goals that were stated above.

Thank you @gr_trading ,

Jacques Hermes team

[gr_trading]

Hi @JH_TECH ,

Thanks! for detailing, I request you to plz remove all your custom code and try with below one.

div#shopify-section-header {
    transform: none;
    box-shadow: 0 1px 10px rgb(35 64 68 / 25%);
}

[JH_TECH]

@gr_trading thanks for providing a small and understandable alternative. This fixes everything except from the scrolling on the home page on the mobile version. When scrolling down, we see 70% of the menu bar and 100% of Google reviews and when we scroll up, we see 100% of the menu and 70% of Google reviews. You can check this out at: jacqueshermes.com

[gr_trading]

Use below CSS to correct it.

.display-flex {
    display: flex;
    justify-content: space-around;
    word-break: break-word !important;
}

[JH_TECH]

This managed to fix the problem! Thank you so much @gr_trading for helping us to figure this out!

Best regards,

Jacques Hermes team