Add social icons to mobile menu (Miller)

Site URL: https://reindeer-shark-rnab.squarespace.com/

Password: happydays

Hi,

Wondering if anyone can help me add some social icons to my mobile menu for this site? I have them on my desktop version but am struggling to find a solution to have them on the mobile menu. My client has a standard account, not business.

Would love the icons to appear below 'contact' on the screenshot below.

Thank you!

Hey @ahluwalia.romy It's possible only on Business plan or higher.

@ahluwalia.romy Hi. I think This is possible with your current plan.

Follow these steps

First, add 4 items to Main Navigation (we will give the code to hide them on desktop)

• Item 1: Name: IN - URL: Instagram url
• Item 2: Name: TW - URL: Twitter url
• Item 3: Name: LI - URL: LinkedIn url
• Item 4: Name: EM - URL: email

Next, edit Site Footer >> Add a Code Block >> Paste this code

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

When you're done, let me know, we will start check & give the code to replace these items to icons on mobile.

On 11/12/2021 at 5:45 AM, tuanphan said:

Thanks @tuanphan - I have created the items and inputted the code block to the site footer. Thank you!

On 11/17/2021 at 6:28 AM, ahluwalia.romy said:

 

Add to Design > Custom CSS

/* hide social text on desktop */
nav.Header-nav.Header-nav--secondary {
    display: none;
}
/* Mobile social icons */
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary a {
    color: transparent !important;
    width: 15% !important;
    float: left !important;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary a:nth-child(n+2) {
    position: relative;
    bottom: -18px;
    z-index: 9999;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:before {
    font-family: "Font Awesome 5 Free";
    display: block;
    color: black !important;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:nth-child(1):before {
    content: "\f0e0";
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:nth-child(2):before {
    content: "\f0e1";
    font-family: "Font Awesome 5 Brands" !important;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:nth-child(3):before {
    content: "\f099";
    font-family: "Font Awesome 5 Brands" !important;
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:nth-child(4):before {
    content: "\f16d";
    font-family: "Font Awesome 5 Brands" !important;
}