Jump to content

Adding a second announcement bar

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can do it with header code injection, either on one page or all pages, this is a start:

<html>
  <div style="background-color:red; padding:4px; display:block; top:0px">
    <p style="text-align:center">
      text here
    </p>
  </div>
</html>

You'll have to adjust it to suit your usage and website.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 1/7/2023 at 10:38 PM, emmyv711 said:

Yes, here is the link for the demo page. https://cherry-tree.squarespace.com/demo PW: cherry. I've created a section with a scroll bar and when I add the code it increases the padding at the top but doesn't move it above the navigation. Thanks for your help 🙏🏻

You want

  • Move header under scrolling bar
  • Remove this top padding?

image.thumb.png.50c687b4ae2a5d88d6b02f694fe93b60.png

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
On 1/11/2023 at 1:19 AM, emmyv711 said:

@tuanphan Yes, I want to move the scrolling section above the navigation. The padding is coming from the code injection I was advised to use earlier in this thread.

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('[data-section-id="63b99122407a284ad5ff104f"]').insertAfter('.sqs-announcement-bar-dropzone');
});
</script>

 

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

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