Jump to content

How to have a fixed menu and categories on top of the pages when scrolling

Recommended Posts

Hi,

How can I make my navigation menu fixed on each page when scrolling?

At the moment is only fixed on the landing page and the category are fixed and go on top of the products when scrolling.

I will attached screenshot because the website has geotargtly installed and if you aren't in switzerland and you don't have a vpn you will be redirected to the .com website.

At the moment the categories are fixed but not the menu.

Those are the codes in use:
<!-- Disappear Anno - Category on scroll -->
<style>
  @media screen and (max-width:640px) {
  .sqs-announcement-bar-dropzone {
    position: static !important;
}
    .ProductList-filter {
    position: Static !important;
}
  }
</style>


<style>
  /* Fix mobile announcement bar */
@media screen and (max-width:767px) {
.sqs-announcement-bar-dropzone {
    top: 83px !important;
}
}
</style>


 

 

 

 

Screenshot 2022-11-02 at 11.05.01.png

Screenshot 2022-11-02 at 11.05.10.png

Screenshot 2022-11-02 at 11.05.25.png

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, LisaLubrini said:

Hi,

How can I make my navigation menu fixed on each page when scrolling?

At the moment is only fixed on the landing page and the category are fixed and go on top of the products when scrolling.

I will attached screenshot because the website has geotargtly installed and if you aren't in switzerland and you don't have a vpn you will be redirected to the .com website.

At the moment the categories are fixed but not the menu.

Those are the codes in use:
<!-- Disappear Anno - Category on scroll -->
<style>
  @media screen and (max-width:640px) {
  .sqs-announcement-bar-dropzone {
    position: static !important;
}
    .ProductList-filter {
    position: Static !important;
}
  }
</style>


<style>
  /* Fix mobile announcement bar */
@media screen and (max-width:767px) {
.sqs-announcement-bar-dropzone {
    top: 83px !important;
}
}
</style>


 

 

 

 

Screenshot 2022-11-02 at 11.05.01.png

Screenshot 2022-11-02 at 11.05.10.png

Screenshot 2022-11-02 at 11.05.25.png

Have you tried using the fixed position for setting style of header yet?

image.thumb.png.8761619ea5fb93ee7aad74d492431ef2.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Marcus_SQSP changed the title to How to have a fixed menu and categories on top of the pages when scrolling

Hi, 

DO you know how I can fix this?

When I'm on a product page and scroll the Logo, the products page and the cart scroll up and disappear, only the product categories stay fixed.

How can I make fixed also the logo, the products page and the cart?

Here are the codes in place.

css:

header.Header--bottom.Header--overlay {
    position: fixed; 
      background: white
}


@media screen and (min-width:641px) {
.ProductList-filter-list {
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    top: 170px;
    background-color: white;
}
}

/* Fix mobile announcement bar */
@media screen and (max-width:767px) {
.sqs-announcement-bar-dropzone {
    top: 83px;
}
}

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000;
  
  }

.show-on-scroll-wrapper.show {
    display: none;
}

.sqs-announcement-bar-close {
    display: none;
}

 

 

 

code injection:

<!-- Disappear Anno - Category on scroll -->
<style>
  @media screen and (max-width:640px) {
  .sqs-announcement-bar-dropzone {
    position: static !important;
}
  
    .-ProductList-filter {
    position: Static !important;
}
  }
</style>

<style>
  /* Fix mobile announcement bar */
@media screen and (max-width:767px) {
.sqs-announcement-bar-dropzone {
    top: 83px !important;
}
}
</style>

 

 

Screenshot 2022-11-10 at 17.58.49.png

Screenshot 2022-11-10 at 17.59.08.png

Link to comment
  • 4 weeks later...
On 12/5/2022 at 7:40 PM, LisaLubrini said:

www.aeneis-paris.ch

But you'll need a VPN unless you are in Switzerland, otherwise you get redirected on the www.aeneis-paris.com website. There somehow I don't have this problem.

Did you solve? I see header, category bar sticky here

https://www.aeneis-paris.com/aeneis-shop-silk-scarves

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 12/31/2022 at 1:36 AM, LisaLubrini said:

Hi, 
No I didn't solve it unfortunately.
You are on the .com website, to access the .ch website you need a VPN if you are not located in Switzerland.

www.aeneis-paris.ch

Here is how it looks at the moment, Header not sticky and category bar fixed.

Can you help?

Screenshot 2022-12-30 at 19.36.23.png

I can't help with this. Tried VPN, but almost provide free version for US or UK Ip only.

You try posting to some groups on Facebook: Squarespace Community, Squarespace Customization Resource Group. 

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.