Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
SteveBall

How to make drop down menu folder for hayden transparent

Question

6 answers to this question

Recommended Posts

  • 0

Steve

Yes, you can remove the folder colour (currently black) by adding this to Design > Custom CSS:


#headerNav nav .subnav, #sidecarNav nav .subnav {
 background-color: transparent;
}

I hope this helps.

Also, here's a friendly heads-up about the contrast of your navigation on larger screen sizes in case you aren't aware. You may want to consider changing the colour of the text or adding a darker layer on the banner image so that there is more contrast. People with poor eyesight may struggle to see it as it doesn't pass accessibility tests.

alt text

Contrast Ratio 1.77:1 WCAG AA FAIL

-Paul

Squarespace Expert & Professional Developer

screenshot-2019-08-09-at-151654.png.43717730ea8267bd89abe4588e1ac8f4.png


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post
  • 0

Hi Paul,

Thank you for the answer that works perfectly, I've taken a look at the contrast as well and edited the overlay to make it a bit darker hopefully this does the trick.

Making the drop down box transparent has created a new issue in that on the gallery pages I cannot add a Banner image or edit the height and so the white text gets lost in the white background.

Is there a way to insert some code to make the banner on those pages bigger?

@Paul2009

https://www.bandrcarpet.co.uk/runners

Thanks for your help!

Steve

Share this post


Link to post
  • 0

Hi Paul,

Thank you for the answer that works perfectly, I've taken a look at the contrast as well and edited the overlay to make it a bit darker hopefully this does the trick.

Making the drop down box transparent has created a new issue in that on the gallery pages I cannot add a Banner image or edit the height and so the white text gets lost in the white background.

Is there a way to insert some code to make the banner on those pages bigger?

@Paul2009

https://www.bandrcarpet.co.uk/runners

Thanks for your help!

Steve

Share this post


Link to post
  • 0

You could make the header taller, but it's probably better to restore the dark background on the folder because the header height then remains consistent throughout. You could do this by adding:


#collection-5b2d025c8a922df608278aec #headerNav nav .subnav, #sidecarNav nav .subnav {
 background-color: #212121;
}





World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


Link to post
  • 0

Hi Paul,

How would I make the header taller? As I really like the transparent folder and also the banner is taller on all our other pages anyway?

Does the code you have sent make the folder dark on all he pages or only on the gallery/runner gallery pages?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...