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

How can I place Social Icons in Mobile Menu?

Question

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!

Edited by mcskin45

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 0

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>

 

Share this post


Link to post
  • 0

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

Cody


– Cody

👻 Founder of the free Squarespace plugins and templates resource Ghost Plugins
🖤 Join Ghost's Code For Good mission to help raise money for charity 
️ Use "CIRCLE" for a discount on templates and Ghost+
👍 Founder and project manager at design agency Moov Labs

Share this post


Link to post
  • 0
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: 

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...