Jump to content

place social icons in main navigation on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I hope you can help me with my problems with Social Media Links on this Squarespace site: https://www.bsil.de

My client wants the social icons to be displayed as flags with a fixed frame. I have set this up for the desktop version. On the smartphone view, the social icons are not displayed. Not in the menu (hamburger menu) and not as flags on the different pages. How can I fix this?

The website is created with 7.0 (Brine Family, Moksha-Template)

To create the box with the social icons, I used this CSS code: 

.Header-social {
   border: 2px solid #c3131d;
  background: #ffffff;
  color: #000000;
}
@media screen and (min-width: 640px) {
  .SocialLinks-link {
    display: block;
  }
  .Header-social {
    position: fixed; 
    top: 40%;
    z-index: 9999; 
    right: 0; 
  }
}

Bildschirmfoto 2023-09-13 um 15.51.39.png

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

This is a bit tricky 😄

Don't remove your CSS code. Add this CSS code to force social icons float on right on mobile

@media screen and (max-width:640px) {
   header.Header.Header--top, .Header-inner.Header-inner--top {
    display: block !important;
      height: 0px !important;
}
header.Header.Header--top [data-nc-container="top-left"] {
    display: none !important;
}
header.Header--top [data-nc-container="top-right"]>*:not(:first-child) {
    display: none !important;
}
   .Header-social {
    position: fixed;
    top: 40%;
    z-index: 9999;
    right: 0;
} 
   .SocialLinks-inner {
    display: flex;
    flex-direction: column;
}}

image.png.c83facc0defbceb40a5720959907f6e8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.