How to do a fixed header navigation?

Hi 

I am trying to find a way to do a fixed header (navigation, logo, cart)  while scrolling down. I want to keep the background transparent as it is on the website now. Please let me know if there is a way to do that with CSS.

Website link 

https://www.szabosihag.com

Thank you 

On 4/22/2022 at 4:31 AM, Meghna said:

Hi 

I am trying to find a way to do a fixed header (navigation, logo, cart)  while scrolling down. I want to keep the background transparent as it is on the website now. Please let me know if there is a way to do that with CSS.

Website link 

https://www.szabosihag.com

Thank you 

Add to Design > Custom CSS

header.Header--bottom.Header--overlay {
    position: fixed !important;
}

Hi 

Thank you its worked. Also i have another issue with the header for mobile. I used this code to make it top navigation bar background Transparent. It works perfectly on front page but I want it with black background on other pages. so i applied it to specific page only it worked. but when i go to another page it doesn't show top bar at first but when i refresh its appears back. I have attached the images. 

Is there a way i can have transparent background just on home page and rest of the pages stay black background

Please help

<style>.Mobile-bar.Mobile-bar--top {
    position: absolute;
    background: transparent !important;
    z-index: 999 !important;
    top: 0;
    left: 0;
    width: 100%;
}</style>

On 4/24/2022 at 6:34 PM, Meghna said:

Hi 

Thank you its worked. Also i have another issue with the header for mobile. I used this code to make it top navigation bar background Transparent. It works perfectly on front page but I want it with black background on other pages. so i applied it to specific page only it worked. but when i go to another page it doesn't show top bar at first but when i refresh its appears back. I have attached the images. 

Is there a way i can have transparent background just on home page and rest of the pages stay black background

Please help

<style>.Mobile-bar.Mobile-bar--top {
    position: absolute;
    background: transparent !important;
    z-index: 999 !important;
    top: 0;
    left: 0;
    width: 100%;
}</style>

Design > Site Styles > Disable Ajax Loading