Add Section above Navigation Bar

Hi all,

I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached).

Seems simple to do, but I haven't been able to land a solution yet.  Has anyone achieved something similar?

Thanks,
-Scott

3 hours ago, whereisscott said:

Hi all,

I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached).

Seems simple to do, but I haven't been able to land a solution yet.  Has anyone achieved something similar?

Thanks,
-Scott

Squarespace have a standard feature - announcement bar which appears on the top of your website.

If you need to add a custom layout like your images attached, we can add it on the footer and use some javascript code to move it above the header.

It is noticed that javascript is only available on Business Plan or above ones.

Thank you for your reply.  The announcement bar doesn't hold graphics, so this wouldn't be a suitable solution for what we need to do here.  I'm curious - couldn't moving a section to the top also be done with CSS?  

It's possible with CSS, but it depends

• Black nav will stick to top on scroll or not?
• This for one page or all pages?

With CSS the solution might be to create that section as the first section, then use CSS position to move the position of the two sections.

Hi @tuanphan this was super helpful for us, but I noticed when I am previewing the site in the header it looks perfect but when I go to actually preview the link in a private browser the home page is all messed up. Do I need to adjust the css in some way? I'd appreciate your help! Screenshots below for reference. 

https://penguin-toucan-s42t.squarespace.com/

Password: DoveLove2023!