Jump to content

How to do a fixed header navigation?

Recommended Posts

  • Replies 3
  • Views 334
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

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

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>

image.thumb.png.7025526ec6c1462e2557810d418175a8.pngimage.thumb.png.68c6dcca1c0889d31888c01de5ae09a6.png

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

image.thumb.png.7025526ec6c1462e2557810d418175a8.pngimage.thumb.png.68c6dcca1c0889d31888c01de5ae09a6.png

Design > Site Styles > Disable Ajax Loading

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.