How can I remove the bouncing effect in the header

Technical Q&A
1

How can I remove the bouncing effect in the header

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

pass: home

2

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.

3

@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

4

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.

5

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;
    }