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
  • Views 614
  • 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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