Social Icons on Mobile Site

Hey dear Community,

I have a problem regarding my mobile site header which I cannot fix without coding but I have no clue how to write the proper code for this:

I want my Mobile Site Header to also show the social icons.

I found a code for just this but then the three bars at the top right (see image) disappear and I want them to also be visible on my mobile site header.

I want the three horizontal bars at the top right, the page name in the middle (just as it is right now) and then my four social icons at the top left (there should be enough space there).

And then I also have to change the image of one of my mobile site icons because this is an external social link.

Thank you very much for potential help and merry christmas,

Philip

Try this thread, seems to have an answer to your question:

https://forum.squarespace.com/topic/208622-squarespace-71-show-social-icons-in-header-on-mobile/#comment-509907

Hey Ziggy - that was exactly the code I used but then the three bars at the top right disappeared. If I can get them back I will be more than happy 😉

(And maybe scale the social icons smaller)

On 12/22/2023 at 2:44 AM, Philip_BT said:

Hey Ziggy - that was exactly the code I used but then the three bars at the top right disappeared. If I can get them back I will be more than happy 😉

 

(And maybe scale the social icons smaller)

If you share site url, we can check easier

Hey tuanphan,

Sorry for the late reply:

https://www.basictrading.net

(Mobile Site is important)

Header should be like this:

Social Icons - BasicTrading - Menu Bars

And I want to change the third social icon image.

Thank you so much in advance!

On 12/27/2023 at 2:32 AM, Philip_BT said:

Hey tuanphan,

Sorry for the late reply:

 

https://www.basictrading.net

 

(Mobile Site is important)

 

Header should be like this:

 

Social Icons - BasicTrading - Menu Bars

 

And I want to change the third social icon image.

 

Thank you so much in advance!

I see you solved desktop icon. With mobile, use this CSS code

header#header .icon[href*="tradingview.com"] {
        background-image:url(https://static1.squarespace.com/static/653e7a7496d8293cdfb19c1c/t/654a7e6b6e2a952e27e2679e/1699380844022/B.T._Insta-removebg-preview.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

header#header .icon[href*="tradingview.com"] svg {
        display: none;
    }

Hey tuanphan,

This helped me a lot already, thanks.

The only thing I need now is the three menu bars at the top right and smaller social icons so I can open my menu (only for mobile site).

Check this image (I drew in the three menu bars where they should be).

(Social Icons smaller please and add the menu at the top right - ONLY on mobile site please)