Mobile Header Navigation - Hides Social Icons

Site URL: https://www.birdmafia.com

Site URL: https://www.birdmafia.com

All,

looking for ideas on what options I have to make the mobile header better. Everything looks great on desktop, but in mobile it makes the social icons hidden until you hit the "..." icon, and it has the shopping bag further over to the left for no apparent reason.  Any ideas on how to make social icons show on top with shopping bag instead of hidden by "..." or if not an option at all     then how to hide the social icons on mobile.  Those are the two ideas I had.

Let me know what you think.

I have this code in to resize the mobile social icons, I tried making them even smaller - it never moved them to top. Just smaller to see once you hit the "..."

//social icon resize in mobile//
@media screen and (max-width:768px) {
.tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper {
    width: 30px;
}
}

To hide icons, add to Home > Design > Custom CSS

div#socialEllipsisMobile {
    visibility: hidden;
}

@tuanphan that worked with no issues.  Any ideas if it's possible to right justify the "shopping bag?"  Just seems strange squarespace would automatically make it float in a random space on mobile responsiveness.  Here's what it looks like now:

Add to Home > Design > Custom CSS

/* align right mobile header cart icon */
.search-cart--mobile.flex-item {
    justify-content: flex-end;
}

@tuanphan thanks again as always!  I've decided to right justify that icon, and just take go ahead and leave the "..." that turn into social icons on mobile. I'd much rather have them up top, but can't seem to get that to work out.

You need to use JavaScript to replace .... with social icons, it is complex, because after moving, you will need to use code to adjust the width and padding of the header elements.

I have saved questions, will check back after answering easy questions on the forum.