Adding static logo over image gallery on homepage with nav bars and title display - Squarespace Brine 7.0

Hi SS World 🙂

Can someone please help me out with creating a hero gallery with the below requirements?? I can't for the life of me find any CSS that will allow me to do what I need and I am running out of time trying to figure it out!

- Sliding images at top of home screen - full bleed / slightly tinted charcoal - [** I have this]

- Transparent nav bar/header - stuck to top at scrolling - [** I have this]

- Logo centered on gallery (does not fade out when images are auto scrolling) - I NEED THIS

- Loading bars for gallery nav anchored at bottom of gallery - I WOULD LIKE TO HAVE THIS, BUT NOT REQ.

- Project title with arrow link to project page (all centered over nav bars) - I WOULD LIKE TO HAVE THIS, BUT NOT REQ.

This what it currently looks like:

This is what I need it do (example site):

Site:  https://vuvuzela-endive.squarespace.com/home-brine

Site password: draftsite2024

Does anyone have anything for this? & quick?

Thanks in advance 🙂

Your website is set to private.

Do you have the logo uploaded?

What have you tried so far?

9 hours ago, Ziggy said:

Your website is set to private.

Do you have the logo uploaded?

What have you tried so far?

Hi Ziggy, thank you for the quick response - sorry about that I just set the site to password protected. 

The logo is uploaded and it's the same one in the top left header. 

For the centered logo:

What I do know about the example one from looking at the coding, is that one seems solely code-based. And I don't know any codes in order to get the logo from the top left of my header. It's Impact font.  the thing that is difficult for me is the shape in the logo and coding that.

Nav Bars and text at bottom (in example):

I have seen a few codes for the nav bars at the bottom but haven't seen any that would be close to what I am looking for. 

I have not tried really much to code these myself as I don't have a large background in coding so I only know a bit of it here and there, enough to sprinkle some into a site to make it a bit nicer on the eyes but nothing like I am trying to achieve now it seems. Any advice you have would be great. 

Thank you!!

You can use this code to Custom CSS box

section#landing-projects:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/65c4f1c542fdd165b260396a/f4f98916-82d3-47ed-9f29-9ed4491f3b5b/A%26M+Recreated+Logo_white_640x400px+01+Artboard+1+Copy.png?format=1500w);
background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 200px;
    height: 200px;
}

section#landing-projects {
    position: relative;
}

14 hours ago, tuanphan said:

You can use this code to Custom CSS box

section#landing-projects:before {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/65c4f1c542fdd165b260396a/f4f98916-82d3-47ed-9f29-9ed4491f3b5b/A%26M+Recreated+Logo_white_640x400px+01+Artboard+1+Copy.png?format=1500w);
background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 200px;
    height: 200px;
}

section#landing-projects {
    position: relative;
}

 

OMG! You are amazing! This worked amazingly to get the logo on top of the hero gallery slider! Thanks a bunch!!

Any idea how they got each of bars to load with the autoscroll of the gallery as well as the arrows linking to each project page the photo targets?

& if anyone out there knows - looking for a cool scroll down icon to live on top of my header so my users know to scroll down. Doesn't have to be like the one in the image, but looking for something simple, a bit opaque, and possibly animated. 

Thank you again!!!!

Right Arrow: I know this. Do you use Personal or Business Plan?

Left Arrow: Are you able add text +link over each image? I can give code to move its position + turn link to an arrow

But with another, I don't know how to

@tuanphan Sorry it took me a while to respond, but I am still hopeful you can help!

I have the business plan. I added the project name and link on image for the first image in my gallery slider (currently just shows it centered on the gallery). I guess I just need to know how to turn that link into a button, or if there's a way to code it to a button from the description, I'm not sure.

Here is a little snip of the code from that site I was referencing so you can see how theirs is laid out a bit better. I've tried to somehow implement this but still can't achieve. 

Also, not sure if you've been to the site since, but I added a generic arrow for the back to top action, but still haven't found anything for that exact "scroll" indicator (I'd still love to have this).

@tuanphan let me know if you have any thoughts!

On 2/29/2024 at 7:44 PM, Geminicreativeco said:

@tuanphan Sorry it took me a while to respond, but I am still hopeful you can help!

I have the business plan. I added the project name and link on image for the first image in my gallery slider (currently just shows it centered on the gallery). I guess I just need to know how to turn that link into a button, or if there's a way to code it to a button from the description, I'm not sure.

Here is a little snip of the code from that site I was referencing so you can see how theirs is laid out a bit better. I've tried to somehow implement this but still can't achieve. 

Also, not sure if you've been to the site since, but I added a generic arrow for the back to top action, but still haven't found anything for that exact "scroll" indicator (I'd still love to have this).

Use this code to Website > Website Tools > Custom CSS

.Index-gallery-item-content {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.Index-gallery-item-content a:after {
    content: "\e005";
    font-size: 30px;
    font-family: 'squarespace-ui-font';
    position: absolute;
    right: -30px;
    top: 5px;
}

@tuanphan that worked! amazing! can you share the additional coding to change the font, color, and size of the text portion?

@tuanphan thank you so much!! Amazing work, as usual.