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

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

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

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

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

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" />

(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

You will see

(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;
}

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

12 hours ago, Keenan1 said:

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

 

#1. Menu icon position

I see you still haven't added code in Step (3) yet. that code will move phone to left of burger + Make it align with burger

#2. With white color, use this code to Custom CSS box

a.mobile-phone {
    color: white;
}

Thanks @tuaphan. CSS is added now.

Can you check and see if what CSS is required to make it the same height as the hamburger menu icon, as well as prevent it from pushing the hamburger menu to the right?

Many thanks

Frances

On 5/21/2024 at 5:09 AM, Keenan1 said:

Thanks @tuaphan. CSS is added now.

Can you check and see if what CSS is required to make it the same height as the hamburger menu icon, as well as prevent it from pushing the hamburger menu to the right?

Many thanks

Frances

#1. You can change top: -5px; to another value

#2. It looks fine to me

Hi @tuanphan

Thanks for your help so far.

On mobile - it seems to look a little different for me (across devices and browers).

With your code - it renders like the screenshot attached "Code A".

I have tweaked the size of the icon so it matches, using the following code, so that it now looks like "Code B".
 

div.header-burger {
    flex-direction: row-reverse;
    align-items: center;
}
.mobile-phone {
    position: relative;
    position: relative;
    left: -10px;
    top: -6px;
     font-size: 20px
}
a.mobile-phone {
    color: white;
}

My question is - the hamburger icon is now sitting too close to the right-hand side edge.

What CSS can I add to move both the icon and hamburger over slightly from the edge of the screen, so that the margin matches the body of the page (indicated by the red line)?

Many thanks

Thanks @tuanphan, that worked perfectly!