Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Social link location in main navigation


happyscone

Question

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

Screen Shot 2021-09-13 at 10.52.10 PM.png

nav design.png

Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 1
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.

Screen Shot 2021-09-26 at 11.43.56 AM.png

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

621488631_ScreenShot2021-09-23at9_14_47AM.thumb.png.2cf52b15649d721ab246ca3281dde603.png

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...