Squarespace 7.1 CSS Tips: Transparent Navigation on a Gallery Section
Squarespace 7.1 boasts a variety of new tools to help designers construct beautiful webpages, but sometimes custom code is needed to make a webpage truly unique.
Have a look at No. 21 here
Recently, we had a project that focused heavily on the photography on the site; we loved the aesthetic that the transparent navigation gave as it didn’t detract from the beauty of the images.
However, the client wanted the introductory banner to be a gallery that auto-scrolled through a selection of images; outside of CSS, this can’t be done (I couldn’t find anything at least).
Note: If the first section on the page is a gallery section set to Full Bleed width, the header won’t be transparent over the gallery images. Instead, the header displays the first section’s background color.
But worry not, your friends here at PixelHaze Academy have identified a couple of CSS lines that will be able to help you add a transparent navigation above your gallery section.
You will need to jump into your DOM Inspector to grab the data-section-id attribute value for the gallery section in question.
Here’s a picture of what you’re looking for:
If you’re in the DOM Inspector, use the inspection tool to highlight over a section; then have a look through the code to find an HTML <section> with the class “page-section”. You should find the correct attribute in this section of code.
Copy the necessary value from the data-section-id attribute and paste it where I’ve marked in the code below:
/*transparent nav on gallery*/ [data-section-id="Insert YOUR value here"] { padding-top: 0 !important; } /*darkens the gallery images*/ [data-section-id="Insert YOUR value here"] img{ filter: brightness(40%); /*adjust this value to brighten/darken the gallery images*/ }
That should do the trick!
If you liked the post, please leave a comment below; likewise, if you have any questions, feel free to contact us at helpuspixelhaze@gmail.com.
I hope you found this useful! Will :)