How to make header icons persist from web to mobile view?

Site URL: https://www.seidoartservices.com

Hi. I've added icons with email/phone links from Font Awesome (Free) to my site header.

I followed this guide:
https://www.bigcatcreative.com/blog/social-links-navigation-squarespace

I would like to learn how to make these icons persist in the mobile view, on the left of the "burger" menu. Currently the mobile view removes all text and links in the header and converts it into the mobile view drop down menu, and now also drags the icons into that menu too.

Ideally I'd like the two icons to persist in the header, when in mobile view, for easy ways for visitors to make contact with my business.

Is this possible through css?

I've attached an image (photoshop edit) of the outcome I'm looking to achieve.

Thanks

Hi. This require JavaScript + CSS. Do/will you use Personal or Business Plan?

On 5/1/2021 at 9:11 AM, tuanphan said:

Hi. This require JavaScript + CSS. Do/will you use Personal or Business Plan?

Hi. I am on the business plan and am able to insert code blocks and code injection etc.

Some small problems on your site

Site URL – https://seidoartservices.com/

1. (Mobile-Homepage) Change to 2 columns?

2. (Tablet-Homepage) change text box width?

3. (Tablet-Header) Make nav links one line?

4. (Mobile-Header) Make 2 icons same line?

5. (Tablet-About) change text box width?

6. (Mobile-About) Move logo top of text?

18 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<a href="tel:0123.456.789"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg></a><a href="mailto:abc@xyz.com"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg></a>').insertBefore('button.Mobile-bar-menu');
	});
	</script>
	<style>
      [data-nc-container="top-right"]>a {
    margin-right: 2vw;
}
</style>

This is great. Thanks tuanphan for the code to make this work on mobile.
What part of the code calls the specific icons? I can't work it out and I am thinking to maybe use the same icons on the web version of the site for consistency.

Thanks for reviewing some other areas of the site. Your site is currently down and I can't see the images but will check again later.

I see most of your notes are about mobile or tablet view of the site. Is there a way to change boxes for mobile or tablet view specifically without changing the web layout? For example #6 you suggest moving the logo above the text for mobile view but if I do this in the editor it makes the text box stretched and squashed the web view.

On 5/5/2021 at 12:58 AM, willod said:

This is great. Thanks tuanphan for the code to make this work on mobile.
What part of the code calls the specific icons? I can't work it out and I am thinking to maybe use the same icons on the web version of the site for consistency.

Thanks for reviewing some other areas of the site. Your site is currently down and I can't see the images but will check again later.

I see most of your notes are about mobile or tablet view of the site. Is there a way to change boxes for mobile or tablet view specifically without changing the web layout? For example #6 you suggest moving the logo above the text for mobile view but if I do this in the editor it makes the text box stretched and squashed the web view.

Hi,

Icon in this line

<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg></a><a href="mailto:abc@xyz.com"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>

I used https://iconmonstr.com/ icon.

To get icon code here, just access iconmonstr.com >> Search >> Choose an icon >> Click SVG format > I Agree.. > Click Embed >> You will see the code

I fixed my site, now you can see images. With change in tablet/mobile, we can use code to target mobile/tablet only. Which issue do you want to fix? We will give the code