Squarespace 7.1 CSS Tips: Transparent Navigation on a Gallery Section

7 Aug

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.

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. ”

— Squarespace, Building a site header

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*/
}