How can I place Social Icons in Mobile Menu?

When building my site, i came across a problem I couldn't solve.  I have my social media icons on the navigation on top of the page.  When viewed in mobile, I lose them.  I was looking to put them in the mobile menu (inside the hamburger icon) but was never able to find a solution.  Was wondering if anyone had a solution to that.  What I did was I placed them in the contact page on the bottom when seen on mobile.  That is a temporary solution until i find a permanent solution.  Is there a way to do this using CSS? I am using brine template.  A solution to this would be appreciated. 

http://www.marinocarrabs.com

Thank you!

Bump

same question here

Bump

13 minutes ago, mcskin45 said:

Bump

If you can place social icons on Secondary Menu, i can give you code to hide them on Desktop, and show only mobile.

Here is what i did.

DESIGN > SITE STYLE > HEADER LAYOUT

Social Position : Hide.

SETTINGS > ADVANCED > CODE INJECTION

Pasted this code to HEADER:

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

Then google fontawesome

Choose your icon

Copy link

create links in PRIMARY NAVIGATION or SECONDARY NAVIGATION.

Paste link to title:

LINK TITLE - <i class="fab fa-facebook"></i>

LINK - url of my social account

And its done.

The size will be the font size you choose for navigation.

Alter its position by rearranging it in the menu.

It will display on mobile also but vertically.

Ghost Plugins strikes again: https://www.ghostplugins.com/secret/841l164f

I think you may need a business account to use this SS feature.

P/W for GhostPlugins secret plugins is "whisper"

I highly recommend subscribing to their list, they are awesome!

From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Header Code Injection box.

<script>
Y.on('domready', function(){
var mobileSocial = Y.one(".Header-social").cloneNode(true).addClass('.mobile-social');
Y.one(".Mobile-overlay-menu-main").append(mobileSocial);
});
</script>

@LJSpace Shhhhh, that's a secret! 🤫 Haha, jk. Thanks so much for sharing Ghost! 😊

Cody

Any idea why the plugin from Ghost works on one of my sites but not another? www.smithstreethomes.com is the site i question where I put it in the header code injection and nothing happens :( 

22 minutes ago, maldrich said:

Any idea why the plugin from Ghost works on one of my sites but not another? www.smithstreethomes.com is the site i question where I put it in the header code injection and nothing happens 😞

follow this comment: 

On 1/2/2020 at 1:38 AM, moovlabs said:

@LJSpace Shhhhh, that's a secret! 🤫 Haha, jk. Thanks so much for sharing Ghost! 😊

Cody

What if I don't have or want social icons on the header? But I still want them on the mobile menu?

On 8/10/2020 at 11:15 PM, siweisong said:

What if I don't have or want social icons on the header? But I still want them on the mobile menu?

Add 3 Link items to Menu & add this to Home > Settings > Advanced > Code Injection > Header, then share site url. We can give the code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

On 8/10/2020 at 9:15 AM, siweisong said:

What if I don't have or want social icons on the header? But I still want them on the mobile menu?

You can still use the code above and then add the following to your Custom CSS to hide on desktop.

// Hide Social Links Header //

.Header--top .SocialLinks-link {display: none !important}

Code worked great, but can't figure out how to change the social icon color on the mobile menu only - any tips? I need them to remain black on the website but trying to get them to display white on the mobile menu - see pic attached. Appreciate anyone's help on this!

On 9/3/2021 at 2:56 AM, knockout.design said:

Code worked great, but can't figure out how to change the social icon color on the mobile menu only - any tips? I need them to remain black on the website but trying to get them to display white on the mobile menu - see pic attached. Appreciate anyone's help on this!

Hi,

What is your site url?

On 9/4/2021 at 9:19 PM, tuanphan said:

Hi,

What is your site url?

Know this thread is old but just in case someone comes across this below is the code to change the color:

////Change mobile social color////
.icon--fill{
  color: #red !important;
}