custom-css Header border, show only on scroll back / Hide it in starting position of the page

rd1 · September 14

Site URL: https://khaki-clementine-tm4r.squarespace.com/

Hello, I have built a website with a fixed header, which is shown only on scroll back. (Settings in the header design menu). I also set a border bottom to the header, which separates the header from the rest of the page.

But I would like to show this border ONLY ON SCROLL BACK. Or, which is the same, to hide it before the scrolling of the page starts.

Do you have any idea which code could work? Thank you very much!

Ruth from Munich

Lesum · September 14

@rd1 Hi! You can add this code under Website > Pages > Website Tools > Custom CSS

.header .header-announcement-bar-wrapper .header-border[data-header-border="true"][data-header-usability-enabled="true"] {
    border: none;
}

.header.shrink .header-announcement-bar-wrapper .header-border[data-header-border="true"][data-header-usability-enabled="true"] {
    border: 1px solid var(--headerBorderColor);
    transition: all 0.2s ease;
}

rd1 · September 15

Thank you so much!!! This works great!

All the best, Ruth

custom-css Header border, show only on scroll back / Hide it in starting position of the page

Recommended Posts

rd1

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

rd1

Posted Images

Lesum

Link to comment

rd1

Link to comment

Create an account or sign in to comment

News

rd1

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources