Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


willod

Question

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
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
Posted (edited)
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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