Sticky Navigation in Wexley Template

Site URL: https://www.transientlife.uk/

Hello All

I am a Squarespace 7.0 user with a website, www.transientlife.uk, built on the Wexley template.  The site, which is to showcase my jazz photography, consists of 5 pages (3 gallery pages, 2 text pages).  I have three requests:

1.  For all 5 pages: I would like the site title & main navigation to stay in place at the top of the screen when scrolling down.

2.  For the 3 gallery pages: I would like the page Header content to stay in place when scrolling down.

3.  For the 3 gallery pages: when clicking through on an image, the site title and the page Header content remains visible (albeit not in fixed position as referenced in 1. and 2.), but the site navigation disappears.  How can I ensure that the navigation stays in place?

Can anyone please enlighten me?

Thanks, Steven

#1. Add to Design > Custom CSS

div#headerWrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: #b3c3c1;
}
div#pageWrapper {
    margin-top: 115px;
}

#2. You mean the text under header?

#3. Use this CSS

/* show nav on lightbox image */
.collection-type-gallery.full-view #topNav {
    display: block !important;
}

tuanphan - yes,  re. #2 the text under the header, i.e. "music photography by steven cropper" should remain in place for when the three gallery pages are scrolled down or an image is clicked through. 

 For #1 and #2, thanks so much.

On 2/19/2022 at 12:23 AM, transientlife said:

tuanphan - yes,  re. #2 the text under the header, i.e. "music photography by steven cropper" should remain in place for when the three gallery pages are scrolled down or an image is clicked through. 

 For #1 and #2, thanks so much.

2.  For the 3 gallery pages: I would like the page Header content to stay in place when scrolling down.

Hi. Can you share link to a page? I don't see any text

Thanks for the reply, but I scrapped that text (apologies for not deleting the earlier reply).

The website now works fine on a desktop PC, but on a mobile device the Menu navigation options are no longer available at all, which must have come about when you helped me freeze the site title.  So, I have undone most of the changes you helped with.

I have stumbled into a minefield of CSS, with little or no understanding of it, so it's probably best if I left well alone.

Thanks, Steven

Hi,

If #1 make problem on mobile, you can use this new code to force code run on desktop only

@media screen and (min-width:992px) {
div#headerWrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: #b3c3c1;
}
div#pageWrapper {
    margin-top: 115px;
}
}