Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

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:

image.thumb.png.40b693bc3bf919acb277b3e825debe17.png

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

Screenshot2024-02-09082422.thumb.png.ae8d5dff77161ffb7bf469206ca8f26b.png

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

Site password: draftsite2024

 

Does anyone have anything for this? & quick?

 

Thanks in advance 🙂

Edited by Geminicreativeco
Posted (edited)

Your website is set to private.

Do you have the logo uploaded?

What have you tried so far?

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
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!!

Posted

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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!!!!

Screenshot 2024-02-12 221752.png

  • 2 weeks later...
Posted

@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. 

image.thumb.png.9824320c1de4a792bb7a15117effd36f.png

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).

Posted
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. 

image.thumb.png.9824320c1de4a792bb7a15117effd36f.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Solution
Posted
On 3/4/2024 at 3:55 AM, Geminicreativeco said:

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

Use CSS code like this

h2.Index-gallery-item-content-heading {
    font-size: 30px;
    color: #f1f;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.