Squarespace 7.1 - Show social icons in header on mobile

Site URL: https://for-testing.squarespace.com

Password: test

In Squarespace 7.1 on mobile, social icons are always inside navigation overlay at the bottom. Instead, I would like to move them into header and hide burger menu.

Desired effect:

6 minutes ago, SquareRefresh said:

Hey @alanx try to add next code into Custom CSS:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-burger {
    display: none;
  }

  .header .header-actions-action--social {
    display: flex;
  }

  .header .header-title-nav-wrapper {
    flex: 1 0 67%;
  }
}

 

Nope, doesn't work.

That's what I get on mobile:

4 minutes ago, alanx said:

Nope, doesn't work.

Please replace, I changed the code and let me know if it work.

1 hour ago, SquareRefresh said:

Please replace, I changed the code and let me know if it work.

Thank you for the updated code. I've noticed that the icons on mobile are too close to each other? Any way to spread them out just a little? Thanks.

14 hours ago, alanx said:

Thank you for the updated code. I've noticed that the icons on mobile are too close to each other? Any way to spread them out just a little? Thanks.

Sure, You can control a margin using next code:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-actions--right .header-actions-action--social .icon:not(:first-child) {
    margin-left: 3vw;
  }
}

4 hours ago, SquareRefresh said:

Sure, You can control a margin using next code:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-actions--right .header-actions-action--social .icon:not(:first-child) {
    margin-left: 3vw;
  }
}

 

Thank you! 👍

15 minutes ago, alanx said:

Thank you!

You're welcome!