Jump to content

Five: Does anyone have CSS to override the homepage header size?

Recommended Posts

I am using a FIVE template but I would like to be able to have variable header sizes by the page. I am currently using the page thumbnail as the header, I would like the home page to be a large header but take the other pages down to like 50% of the home page banner size. PLEASE HELP!

Link to comment
  • Replies 21
  • Views 30.8k
  • Created
  • Last Reply

Sure, you can do it a couple ways. You can specify on a page-per-page basis by adding this to your(s) 'Page Settings' > 'Advanced' > 'Page Header Code Injection'

    #banner-area-wrapper { height: 200px; }

But if you want the same sized banner for all pages except the homepage, I would probably do it this way instead -- go to the 'Style Editor' and set the 'Banner Area Height' to the height you want for the rest of your pages, and then go to the homepage and go 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and add this custom CSS:

        #banner-area-wrapper { height: 500px; }

Using this technique, you will have consistent banners for all pages (and newly created pages) and a custom one for just the homepage.

Link to comment
  • 3 months later...

@Kale CleoThreads.com. I can edit the universal banner size via the Style Editor, however I'm trying to make an exception with one particular 'collection' or page so its banner height is significantly smaller.

Link to comment

@Toe Try adding this CSS to your custom CSS section:

#collection-52017e88e4b0e6816c1cd75a #hero .page-image { min-height: 200px; }

That will change the height of your banner image on the 'Contact Us' page (not sure if that's the one you're wanting to alter but I used it to figure it out).

If its for a different page, and you don't know how to get the collection ID, just post back, or alternatively, you can apply this to a single page by going to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and pasting this (including style tags)

    #hero .page-image { min-height: 200px; }

Link to comment

@Kale Thank you! This worked perfectly.

I'm not sure what the '#hero' is? I'm not too familiar with CSS but I've made minor edits to pages with collection ID's.

Also, why wouldn't { height: } work? What's the 'min-height' offer?

Link to comment

The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work).

I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).

Link to comment
  • 4 weeks later...

@john_mtthws adding this snippet of code to the custom CSS Editor found within Style Editor will let you select the default banner area size for all pages with the Style Editor, but override it only for the homepage. Just adjust the padding top and bottom to the value you like best.

.homepage #banner-area {
 padding-top: 192px;
 padding-bottom: 192px;

Link to comment

@kale thank you for your help! I had to add a bit of code to make it work..

.main-image-wrapper { height: 200px; } .main-image-wrapper .main-image { height: 200px; }

However this does not work for mobile. Setting the height of these images appears to resize the images beyond the device width. Any suggestions for how to deal with mobile?

Link to comment
  • 7 months later...
  • 2 years later...

kale,you seem to have all the answers for this!!! could you help me with the same thing on a store page in Horizon? I want to make the header (or banner image as it is called in this template) padding only 150 pixels for this one page and leave it as 300px for all the others. I have tried pretty much all the ccs from this feed to no result. help plz!

Link to comment
  • 1 year later...
  • 4 months later...
  • 5 weeks later...
  • 3 months later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • 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.