How can I remove the bouncing effect in the header

Janamir
Pathfinder
161 0 52

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
153 14 32

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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
GemPages_Agents
Shopify Partner
51 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

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 - #1 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