How to make drop down menu folder for hayden transparent

Hello,

I would like to make the drop down menu under 'our' work transparent so that you just see the writing, is this possible?

The template i'm using is Hayden.

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

Thankyou.

Steve

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.

Contrast Ratio 1.77:1 WCAG AA FAIL

-Paul

Squarespace Expert & Professional Developer

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

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

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

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?

Hello! does anyone know how to do this for the lange template? https://duck-blackbird-9tyl.squarespace.com/config/design/custom-css

here is my site. i'm looking to make the navigation drop down folders background transparent :) thank you