Jump to content

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

Recommended Posts

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

Untitled-3.jpg

Link to comment
  • Replies 6
  • Views 384
  • Created
  • Last Reply
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.

Link to comment
On 5/2/2021 at 3:44 PM, willod said:

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

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>

image.thumb.png.2eabdec40d32802016c037618191ae91.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

Some small problems on your site

Site URL – https://seidoartservices.com/

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

seidoartservices.com-01-min.png

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

seidoartservices.com-02-min.png

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

seidoartservices.com-03-min.png

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

seidoartservices.com-04-min.png

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

seidoartservices.com-05-min.png

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

seidoartservices.com-06-min.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
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>

image.thumb.png.2eabdec40d32802016c037618191ae91.png

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.

Link to comment
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

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

Archived

This topic is now archived and is closed to further replies.

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