Liquid, JavaScript, themes, sales channels
How can I remove the bouncing effect in the header
Site: https://butterflight-boutique.myshopify.com/account/login
pass: home
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.
@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
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.
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;
}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024