-Adjusting position of homepage image

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

I'd like the image on my homepage to appear below the header.  As you can see the header is cutting off the head of my image.  Can anyone advise on how to move my homepage image so the whole thing shows up below the header?

On 8/22/2020 at 12:45 PM, HairyStories said:

the header is cutting off the head of my image

Have you tried to adjust the image's focal point?

Thanks, yes I did put the focal point at the top of his head in the picture, but it's not enough.  Seems the image is taking the full page and getting covered up by the header.  If you have any other ideas, I'd appreciate it sir! 

20 hours ago, HairyStories said:

Seems the image is taking the full page and getting covered up by the header

I didn't notice the solid header 🙂

The section background (banner image) normally sits behind the header, but when the header is solid instead of transparent, it obscures some of the image. You should be able to lower the image using some CSS, but note that the header height changes with the screen width, so you may need to compromise on the exact position. For example (add to Design > Custom CSS):

.homepage .section-background:first-of-type {
  top: 110px
}
.homepage .header {
  min-height: 110px!important;
  background: #000;
}

Notes:

• The code shifts down the background image in the first section.
• Ths code is specifically aimed at the homepage only.
• The code assumes a black (#000) header.
• It shifts the image down by 110 pixels.
• This is only for Squarespace 7.1 templates.

You are a godsend!  Is there something i can do to show my appreciation?

BTW: I wonder if you might have a suggestion for my other homepage problem:  My site logo image is tiny (top-left 'Hairy').  When I make it taller, it makes my header much taller.  I adjusted the logo height, but it seems there's some sort of buffers or margins within the header that are making higher than I want.  Sort of like 'margins' in a document.  I'd like to slot my logo in there with minimum margins above and below it (i.e. without having to make my header taller).  Any advice would be much appreciated! 

3 minutes ago, HairyStories said:

Is there something i can do to show my appreciation?

Clicking Like, Love or Thanks in the bottom right corner is enough 🙂

7 minutes ago, HairyStories said:

When I make [the site logo] taller, it makes my header much taller.  I adjusted the logo height, but it seems there's some sort of buffers or margins within the header that are making higher than I want. 

There's something called "padding" around the logo that changes according to the width of the site. You can reduce this to a specific amount (for example 17-pixels) using the following CSS. I've also added a line to set the height of the logo, but you could adjust this using the built-in controls instead.

.header .header-announcement-bar-wrapper {
    padding-top: 17px;
    padding-bottom: 17px;
}
.header-title-logo img {
    max-height: 86px;
}

You are an absolute gentleman!  Thanks soooo much!!!

Hi Paul,

Surprise, it's me again!

Site URL: https://www.hairystories.com/seasons

Might you be able to advise on how to add another link next to the button on a card block? I'd like to be able to add direct links to podcast on Apple and Spotify. 

Hey Paul! Thanks for the code above to move the header image 110px down. I put it on my site but it seems to affect ALL the elements on the front page (including even footer). What went wrong? I'd like to target only the first image (section, image as a bg) and move it down so it is not covered by the menu.

21 hours ago, freelancervillepalmu said:

Hey Paul! Thanks for the code above to move the header image 110px down. I put it on my site but it seems to affect ALL the elements on the front page (including even footer). What went wrong? I'd like to target only the first image (section, image as a bg) and move it down so it is not covered by the menu.

Can you share site url? We can help easier

On 11/12/2020 at 1:00 PM, tuanphan said:

Can you share site url? We can help easier

Thanks for the quick reply. Unfortunate I cannot share the site yet (it is still unpublished). The code above fixed the problem - first section bg image on the home page is moved down and no more clipped by the navigation. BUT it also messed up all the sections below. All content is moved xx px down and for example the content on my footer is now clipped by the section.

How do I edit the code so it affects ONLY the first image on the homepage? I'm using the newest Squarespace with no custom code.

You can setup password & share url

Can I reach you via email? I do not feel comfortable posting an unfinished site on a public forum.

4 minutes ago, freelancervillepalmu said:

Can I reach you via email? I do not feel comfortable posting an unfinished site on a public forum.

You can use link in the signature

4 minutes ago, tuanphan said:

You can use link in the signature

ok, I sent you the link via the form.

Thanks a lot Tuanphan! I changed the code to this as instructed and now it works fine 🙂

/* Home first section */
.homepage #page section:first-child .section-background:first-of-type {
    top: 60px
}
 

Use a gallery block instead of an image or headline block. Just put one image in the gallery, and hide the arrows. The gallery block starts right below the header, unlike the image and headline blocks, which slip underneath the header. (You can see the "missing" part of your image or headline block by setting the header to transparent.)

I'm trying to shift my Index Page below my header on https://ivesgrafik.com/ and the code below did not work for me:

.homepage .section-background:first-of-type {
  top: 110px
}
.homepage .header {
  min-height: 110px!important;
  background: #000;
}

Currently, I'm using the code below. It's the closest solution I've come across; however, it affects the entire site not just the Index Page which is my homepage.

Thank you.