Social Icons displacing on iPhone

The social icons on the top header of my site are supposed to be fixed with the header. But I was able to see an issue when someone scrolls all the way to the top on two different iPhones. In the homepage, there's some white space at the top and the icons slide upward rather than being fixed on the header. Please note, you'll have to scroll down first and then scroll all the way to the top to see the issue.

https://static.livechatinc.com/8801096/JIJC6/b88d9c1e63d0e7748d6da693a85eb883/1.png

  • Nastia
    • Support Rock Star

    Hello eTech

    Hope you're doing well!

    There is custom code added on a site, where top value is set to -5 with an important tag :

    @media screen and (max-width: 780px)
    #hustle-sshare-module-display {
        position: fixed!important;
        top: -5px!important;
    /*Other Styles*/
    }

    The CSS code sould be:

    @media screen and (max-width: 780px)
    #hustle-sshare-module-display {
        position: absolute !important;
        top: 0px !important;
    /*Other Styles*/
    }

    I couldn't locate where the CSS code is added on the site. Since there is !Important tag added, the CSS needs to be changed manually. Please change the CSS code and let us know how it went.

    Have a nice day!

    Cheers,
    Nastia

  • eTech
    • Design Lord, Child of Thor

    Hi,

    This didn't fix the problem. If anything it made the social icons disappear. This is the following code that's current right now:

    @media screen and (max-width:780px) {
    #hustle-sshare-module-display {
    position:fixed!important;
    top:-5px!important;
    right:110px!important;
    width:auto!Important;
    z-index:999999999!important;
    }
    .hustle-shares-floating {height:0;}
    }

  • Nastia
    • Support Rock Star

    Hello eTech

    Hope you're doing well!

    Because the !important tag can't be overwritten by another please let me know where this code added on your site so I could edit it and see the outcome? I have not located it in Customizer > Additional CSS, nor in WPBakery Custom CSS and Scripts n Style.

    Please advise,

    Kind regards,
    Nastia

  • Oguz
    • QA Engineer

    Hey eTech ,

    Hope you're well.

    I debug the problem on my iPhone and looks like iOS keeps "position:fixed" elements on top when you did "pull down" gesture. So to make social icons going down when you did pull down needs not only CSS change but also HTML code changing. But this is not possible.

    For this reason, I decided to work on the top bar. When we make the top bar stays on top always, it looks like better and solved. So I added this custom CSS to your Additional CSS place;

    @media(max-width:768px){
    	#masthead.site-header{
    		position:fixed;
    	}
    }

    Can you check on your side and let me know is it ok for your side too?

    Cheers,
    Oguz

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.