Jump to content

Squarespace 7.1 - Show social icons in header on mobile

Go to solution Solved by SquareRefresh,

Recommended Posts

  • Solution
3 hours ago, alanx said:

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.

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,
  .header .header-actions-action--social {
    display: flex;
  }

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

 

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
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:

IMG_0097.thumb.jpg.df61174e6f9b9cc895b183442c201bf7.jpg

Link to comment
  • abc changed the title to Squarespace 7.1 - Show social icons in header on mobile
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;
  }
}

 

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.