Jump to content

How to add a floating static image to header

By cepheusmaximus, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

cepheusmaximus Level 2

cepheusmaximus

Posted
Posted (edited)

Site URL: https://www.petitjeanjewellery.ca/

Hi folks.  I'd like to add a Canadian flag to my header, to the right of -- but not part of -- the navigation bar.  The flag should remain visible even on mobile devices.  Picture is attached to clarify what I mean.  I just can't figure out the syntax, or the best place to put the custom code (header injection, Design > Custom CSS, etc).

Can you help?

Capture.PNG

Edited by cepheusmaximus
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
19 hours ago, cepheusmaximus said:

Site URL: https://www.petitjeanjewellery.ca/

Hi folks.  I'd like to add a Canadian flag to my header, to the right of -- but not part of -- the navigation bar.  The flag should remain visible even on mobile devices.  Picture is attached to clarify what I mean.  I just can't figure out the syntax, or the best place to put the custom code (header injection, Design > Custom CSS, etc).

Can you help?

Capture.PNG

What is the purpose of the flag, is it just for displaying or you want a language switcher there?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted
On 11/21/2021 at 11:38 PM, cepheusmaximus said:

Hi and thank you. It is just for display. It is not for selecting a language or currency. 

Add to Settings > Advanced > Code Injection > Footer 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg" class="cnd"/>').appendTo('.header-title-nav-wrapper');
	});
</script>
<style>
  img.cnd {
    width: 50px;
    margin-left: 20px;
}
  @media screen and (max-width:991px) {
  img.cnd {
    position: absolute;
    right: 2vw;
    top: 5px;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 11/24/2021 at 12:07 AM, cepheusmaximus said:

Wow, like magic.  Thanks @tuanphan!  Worked perfectly.  This is a very different approach than I was taking.  Never would have thought to enter code in the footer.

How did you choose max-width:991px?  I'm seeing some overlap with the nav bar at certain screen widths and am wondering if playing that value might address it.

 

image.png

Hi. Which screen size do you see problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources