How can I place Social Icons in Mobile Menu?

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