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

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>

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>

 

 

 

 

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

Hi, 
I have a 7.0 I don't see this option : (

1 hour ago, LisaLubrini said:

I have a 7.0 I don't see this option : (

The fixed option is for v7.1. On v7.0 it will depend on the template whether you have a similar option or if it might be achieved with CSS.

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>

What is your site url? We can check the code easier

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.

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

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?

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?

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.