Jump to content

Add a logo and clickable text over moving images

Go to solution Solved by Beyondspace,

Recommended Posts

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

I'd like to be able to have my homepage have a slideshow of images and instead of the logo and navigation links to be in the header, I'd like them to be in the middle of my moving images. I'd also like to have a white version of the logo and make the navigation links white but only on the homepage. Current password to enter the site is 'testing'.

 

Any help would be appeciated!

Edited by Nordin
extra info
Link to comment
  • Solution
On 1/17/2022 at 1:22 AM, Nordin said:

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

I'd like to be able to have my homepage have a slideshow of images and instead of the logo and navigation links to be in the header, I'd like them to be in the middle of my moving images. I'd also like to have a white version of the logo and make the navigation links white but only on the homepage. Current password to enter the site is 'testing'.

 

Any help would be appeciated!

Try adding to Home > Design > Custom Css

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.c9422453820dcd5d67a43c94eba2f7d6.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

10 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you! It works now but when i'm on the phone version it still ends up with a small black logo in the middle with no navigation options underneath 

image.png.6910dde554746540a190c8e2a28c89a1.png

Edited by Nordin
Link to comment

Do you know if there's a way for me to make the navigation bar as a text box instead and have it be moved over the photo? So if people see if on the phone it still gets shown over the image instead of in the corner drop down menu? I've got the text as a block underneath the images on the homepage. Also one issue I've seen on the phone is when you click the navigation dropdown the logo appears over the text. So it would be nice to just have the 4 options under the logo on the main screen if possible?

I've added the code to make the logo white on the mobile version as well.

edit: sorry to keep asking for more help. I'm trying to now increase the logo size on the phone but I can't seem to do it using the 'width' code.

image.png.39c830ef04368a599c977a54d03653a4.pngimage.png.b5d91506283573ecb4aa95bb0f10395a.png

Edited by Nordin
Link to comment

Try the following code to set on mobile

@media screen and (max-width: 767px){
  #collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo img {
    max-height: 90px;
    filter: invert(1);
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  #collection-61d85cce3ba6b90751e343ba .header--menu-open .header-title-logo {
    display: none;
  }
}

Let me know how it works

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, bangank36 said:

Try the following code to set on mobile

@media screen and (max-width: 767px){
  .header-display-mobile .header-title-logo img {
    max-height: 90px;
    filter: invert(1);
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

Let me know how it works

Ooh looks great now, almost there 😛 Now the only issue is on the other pages the logo is still white/inverted so it can't be seen at the top anymore.

image.thumb.png.71f9cc0049b9deea701618b7ed9c5001.png

Link to comment

Actually all done now, I managed to change your code slightly to make it work on the rest of them. Thank you so much for all your help!

 

This was the full code in the end with some of my minor tweaks:

 

@media screen and (max-width: 767px){
 .header-display-mobile .header-title-logo img {
    max-height: 90px;
    
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

#collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

 

Link to comment
3 minutes ago, Nordin said:

Actually all done now, I managed to change your code slightly to make it work on the rest of them. Thank you so much for all your help!

 

This was the full code in the end with some of my minor tweaks:

 

@media screen and (max-width: 767px){
 .header-display-mobile .header-title-logo img {
    max-height: 90px;
    
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

#collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

 

Good job bro

It's good to know that you 've figured it out

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.