Jump to content

How to add a phone icon next to Hamburger in Mobile view

Recommended Posts

  • Replies 4
  • Views 171
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)
7 hours ago, Keenan1 said:

Hi there

 

I would like to add a phone icon (image/png/svg) next to the hamburger menu, with a link to a phone number.

What CSS do I need to add to achieve this?

The website is:

https://piano-lizard-y585.squarespace.com

Password: BWS

Phone number would be: 0800 297 222

 

Many thanks

 

I think we can use some javascript code to move the CTA phone next to the hamburger menu, then apply the background image on it to get the phone icon

image.thumb.png.952262a2bae7929b234ec4c51adc0326.png

What is your current plan? It requires business plan or above to run javascript

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 5/15/2024 at 6:23 AM, Keenan1 said:

Thanks Beyond Space. It's a business plan.
The phone icon also needs to appear when the menu is both open and closed.

You can follow these

(1) Add this to Website > Website Tools > Code Injection > Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

image.png.ee42d3df5f59abea26bab034ac2ea853.png

(2) Add this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('<a href="tel:0123456789" class="mobile-phone"><i class="fa-solid fa-phone fa-beat"></i></a>').appendTo('.header-burger');
});
</script>

replace 0123456789 with your phone number

image.thumb.png.3f16f164c7afda22d7429b428f7ad9d0.png

You will see

image.png.b6e9e77468c7905a9321fa2cd3c0d2db.png

(3) Use this code to Website Tools > Custom CSS

div.header-burger {
    flex-direction: row-reverse;
    align-items: center;
}
.mobile-phone {
    position: relative;
    left: -20px;
    top: -5px;
}

image.png.1d037f967adaecb4504cc586d117deed.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

Thank you so much, @tuanphan

I'd like to tweak the icon slightly -

- Bigger - so that it's the same height as the hamburger menu icon

- Make it white

 

What extra CSS would I need to include?

Also - is it possibly moving the menu icon over to the right? It seems to be doing this when I view it on my mobile (although it doesn't' behave the same in the Squarespace "mobile view" on the desktop editor).

 

Many thanks

 

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.