Jump to content

Add Section above Navigation Bar

Go to solution Solved by whereisscott,

Recommended Posts

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

Screenshot 2023-01-03 at 3.51.58 PM.png

Link to comment
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

Screenshot 2023-01-03 at 3.51.58 PM.png

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.

Edited by Beyondspace

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, Keyword Highlighter
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

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.

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
  • Solution

Hi @tuanphan

Yes, I was able to do this - here's the code. It would only work for a single page since this targets only the section that would be on the homepage right now, but it's good to know how I'd do this.  (I've since created a workaround that includes the text the client wanted to be on the navigation bar).  Here's the code, though:

#header {
  position: absolute;
  top: 340px; /* This value determines the distance from the top of the page */
  left: 0;
}
section[data-section-id="NUM] {
  position: absolute;
  bottom: 190px; /* This value determines the distance from the top of the page */
  left: 0;
}

Link to comment
  • 4 weeks later...

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.