Jump to content

Image banner above website pages

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.lemonwoodfloral.com/

Does anyone know how to add an image about the website pages (the tabs)? I am trying to add an image banner with my main logo above my site pages. My site is : www.lemonwoodfloral.com     An example of what I am describing & trying to achieve can be found on this site (which I know uses version 7.1) : https://sierradyerco.com/ 

 Thank you for any help regarding this! 

Link to comment
  • Solution
6 minutes ago, lemonwoodfloral said:

I am trying to add an image banner with my main logo above my site pages. An example of what I am describing & trying to achieve can be found on this site (which I know uses version 7.1)

The example site that you've quoted is actually built on Squarespace 7.0 and is using a Brine-family template, but you can do the same on 7.1 by:

  • Adding a section with a background image, some text blocks and an image block for the logo.
  • Adding a section with text blocks to manually create something that looks like a navigation bar below the banner image.
  • Hiding the header on the homepage with a line of Custom CSS.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
17 minutes ago, paul2009 said:

The example site that you've quoted is actually built on Squarespace 7.0 and is using a Brine-family template, but you can do the same on 7.1 by:

  • Adding a section with a background image, some text blocks and an image block for the logo.
  • Adding a section with text blocks to manually create something that looks like a navigation bar below the banner image.
  • Hiding the header on the homepage with a line of Custom CSS.

Do you know how I can find Custom CSS to hide the header on the homepage? The rest of what you said makes complete sense and I didn't think about accomplishing it that way! And I apologize for misspeaking about the demo site using 7.1. Thank you! 

Link to comment
13 minutes ago, lemonwoodfloral said:

Do you know how I can find Custom CSS to hide the header on the homepage?

You should be able to add this to Design > Custom CSS to hide the header on the homepage:

.homepage .header {
  display: none;
}

And there's no need to apologise, we're here to help each other! 🙂 

Did this help? Please give feedback by clicking an icon below  ⬇️

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
1 hour ago, paul2009 said:

You should be able to add this to Design > Custom CSS to hide the header on the homepage:

.homepage .header {
  display: none;
}

And there's no need to apologise, we're here to help each other! 🙂 

Did this help? Please give feedback by clicking an icon below  ⬇️

This worked perfectly-- 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

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