How can I remove the bouncing effect in the header

Janamir
Explorer
132 0 46

How can I remove the bouncing effect in the header

Site:  https://butterflight-boutique.myshopify.com/account/login

pass: home

0 Likes
David_Weru
Trailblazer
129 9 21

You can. 

The reason it's happening is because it's made to stay on top of the screen, and appears to bounce (on mobile at least) because the address bar goes away when you scroll down.

On some themes, go to the customize themes and look for header settings on the pannels on the left side.  The theme you are using should have those settings.

If nothing changes, you or a developer (me if you'd like) might need to modify the style sheet in the code editor.  just let me know.  

 

0 Likes

@Janamir 

There is not really an easy fix for that, especially because the anouncement bar seems to be injected.

You can, however, try adding some "fade-in" animation to it. It will definitely ease in its appearance and mask the bouncing. 

Instructions:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.gempage .site-header__wrapper,
.site-header__wrapper{
	transition: all .6s;
}

.site-header__wrapper{
	opacity: 0;
}

.gempage .site-header__wrapper{
	opacity: 1;
}



Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
GemPages_Agents
Shopify Partner
43 9 32

Hi @Janamir 

You can try this solution:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.liquid->paste the code at the bottom of the file

body {
    padding-top: 0!important;
}

However, the header's effect is affected by announcement bar of the theme. Making changes on header may have effects to your theme or other pages, so you are kindly advised to reach out the theme's support for proper assistance.

Hope the information helps.

 

If you find my reply helpful, please hit Like and Mark as Solution
Join the waitlist to enjoy exclusive offers once we're back on Shopify at https://gmpg.link/reborn
Get connected: Website | Youtube | Community | Partners | Help Center
0 Likes
LitExtension
Shopify Partner
1228 156 217

Hello,

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
body{
padding: 0px !important;
}
.site-header__wrapper {
transition: none !important;
transform: none !important;
}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes