Jump to content

2 Questions - How to Remove Arrows and Still Allow Auto Hero Banner to Animate? and How to Make Logo and Navigation White (Only) on Homepage?

Recommended Posts

Question #1

Hi, Ok I found this tutorial that uses: "Squarespace Auto Layouts".
https://www.thestyledsquare.com/blog-content/how-to-create-a-rotating-hero-banner-with-squarespace-auto-layout

I followed the tutorial here and added the code. It works perfectly but it needs "Arrows" to be enabled to work. If I turn off (hide) "Arrows" then the hero banner stops auto scrolling through the images. (Edit Content > Design > Style > Navigation > Arrows)

Question: How can I add code to CSS to "hide" the slider arrows and still allow the banner images to auto scroll?



___________________________________________________________________

Question #2
Question: How do I Make my Logo and Navigation "White" only on my Homepage and keep them black on all other pages?

 

Edited by lornem
Link to comment
  • lornem changed the title to 2 Questions - How to Remove Arrows and Still Allow Auto Hero Banner to Animate? and How to Make Logo and Navigation White (Only) on Homepage?

Question 1:

try this custom CSS, it should just make them invisible to the users. 
 

.user-items-list-banner-slideshow {
  .desktop-arrows, .mobile-arrows {
    opacity: 0;
  }
}

Question 2:

this should make all the home page stuff white. if not leave the code and let me know!

.homepage {
  .header-title-logo img {
    filter: invert();
  }
  .header-nav-wrapper a, .sqs-cart-quantity {
    color: white;
  }
  .header-actions .icon--fill svg {
    fill: white !important;
    stroke: white !important;
  }
  .burger-inner > div {
    background-color: white !important;
  }
}

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Wow that worked great thank you.

1) The white logo get's lost on the busy backgrounds.
Is there a way to add a subtle black drop shadow beneath my logo and the menu.

Would Something like this work?
filter: drop-shadow(0px 0px 20px #6D6875);

2) Also, the "clicked state of the menu item is black. So "home" is black when clicked and doesn't show up well on the sliders. I went through (Site Styles > Colors) but didn't see an option for adding a color to the clicked state.

I want to change the "clicked" state to "red" #CE2424 so whatever page a person is on that page's menu item would be red.

Edited by lornem
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.