cepheusmaximus Posted November 20, 2021 Share Posted November 20, 2021 (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? Edited November 20, 2021 by cepheusmaximus Link to comment
Beyondspace Posted November 21, 2021 Share Posted November 21, 2021 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? 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 pluginIf 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
cepheusmaximus Posted November 21, 2021 Author Share Posted November 21, 2021 Hi and thank you. It is just for display. It is not for selecting a language or currency. Link to comment
Solution tuanphan Posted November 23, 2021 Solution Share Posted November 23, 2021 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
cepheusmaximus Posted November 23, 2021 Author Share Posted November 23, 2021 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. Link to comment
tuanphan Posted November 26, 2021 Share Posted November 26, 2021 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment