pro Posted November 18, 2021 Share Posted November 18, 2021 (edited) 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: Edited November 18, 2021 by alanx SquareRefresh 1 Link to comment
Solution SquareRefresh Posted November 18, 2021 Solution Share Posted November 18, 2021 (edited) 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 November 18, 2021 by SquareRefresh pro 1 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
pro Posted November 18, 2021 Author Share Posted November 18, 2021 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: Link to comment
SquareRefresh Posted November 18, 2021 Share Posted November 18, 2021 4 minutes ago, alanx said: Nope, doesn't work. Please replace, I changed the code and let me know if it work. pro 1 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
pro Posted November 18, 2021 Author Share Posted November 18, 2021 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. Link to comment
SquareRefresh Posted November 19, 2021 Share Posted November 19, 2021 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; } } pro 1 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
pro Posted November 19, 2021 Author Share Posted November 19, 2021 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! 👍 SquareRefresh 1 Link to comment
SquareRefresh Posted November 19, 2021 Share Posted November 19, 2021 15 minutes ago, alanx said: Thank you! You're welcome! pro 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment