Jump to content

Sticky Navigation in Wexley Template

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 507
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Edited by transientlife
Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.