happyscone Posted September 14, 2021 Share Posted September 14, 2021 Site URL: https://cone-tuna-x47f.squarespace.com/contact Does anyone know if it is possible to move the location of the social icons on the main navigation? Squarespace automatically aligns them the the left side of the screen. I would like them to be to the right and directly inline with the main text links (image of design mockup attached). Thanks in advance for any help! URL: https://cone-tuna-x47f.squarespace.com/contact Pass: haircare Link to comment
tuanphan Posted September 16, 2021 Share Posted September 16, 2021 Hi, 2 options to do this O1. Use JavaScript code to move social icons into nav (Need a Business Plan or higher) O2. Use FontAwesome to add icons via Link Item in Pages > Main Navigation (Support All Plans) Which option do you prefer? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
happyscone Posted September 18, 2021 Author Share Posted September 18, 2021 @tuanphan either works! I will be using a business plan, but I kind of want to learn how to do it the svg way too 🙂 Link to comment
tuanphan Posted September 19, 2021 Share Posted September 19, 2021 On 9/18/2021 at 10:03 AM, happyscone said: @tuanphan either works! I will be using a business plan, but I kind of want to learn how to do it the svg way too 🙂 Step 1. Add this to Code Injection > Header <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> Step 2. In Pages > Main Navigation >> Add 5 Link Items Item 1 Name: FB URL: Fb url Item 2 Name: IN URL: Instagram URL Item 3 Name: PI URL: Pinterest url Item 4 Name: TW URL: Twitter URL Item 5 I don't know icon 5 name?? You can add coressponding name & url When you're done, let me know. I will check & give the code to replace all text with social icons Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
happyscone Posted September 20, 2021 Author Share Posted September 20, 2021 @tuanphan I added the Instagram + FB links as you described above. Link to comment
tuanphan Posted September 21, 2021 Share Posted September 21, 2021 22 hours ago, happyscone said: @tuanphan I added the Instagram + FB links as you described above. Add to Design > Custom CSS Quote header#header a[href*="facebook"], header#header [href*="instagram"] { font-size: 0; } header#header a[href*="facebook"]:before { content: "\f09a"; font-family: "Font Awesome 5 Brands"; font-size: 18px; } header#header [href*="instagram"]:before { content: "\f16d"; font-family: "Font Awesome 5 Brands"; font-size: 18px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
happyscone Posted September 21, 2021 Author Share Posted September 21, 2021 @tuanphan Thank you! Link to comment
happyscone Posted September 23, 2021 Author Share Posted September 23, 2021 @tuanphan this worked great on desktop, but on mobile the icons are stacking. Is there a way to make them all on the same line? Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 On 9/23/2021 at 11:15 PM, happyscone said: @tuanphan this worked great on desktop, but on mobile the icons are stacking. Is there a way to make them all on the same line? Add to Design > Custom CSS /* Social icons on mobile */ @media screen and (max-width:767px) { .header-menu-nav-folder-content { flex-direction: row; flex-wrap: wrap; flex-grow: unset; } .header-menu-nav-folder.header-menu-nav-folder--active>div>div:nth-child(n+5) { width: 15% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
happyscone Posted September 26, 2021 Author Share Posted September 26, 2021 @tuanphan this worked, but the icons are not center on the screen. I tried a few different properties, but no success. Link to comment
Solution tuanphan Posted September 28, 2021 Solution Share Posted September 28, 2021 On 9/27/2021 at 1:45 AM, happyscone said: @tuanphan this worked, but the icons are not center on the screen. I tried a few different properties, but no success. Add this to Design > Custom CSS /* Mobile-center menu overlay icons */ @media screen and (max-width:767px) { .header-menu-nav-folder.header-menu-nav-folder--active>div>div:nth-child(n+5) { position: relative; left: -6.5vw; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
happyscone Posted September 29, 2021 Author Share Posted September 29, 2021 @tuanphan thank you so much! that worked this time 🙂 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