carson-template Make menu bar not visible until top of page (Carson template)

Site URL: https://swan-arugula-5f75.squarespace.com/

Website pswrd: 12345678

When I scroll down my page, the top menu bar disappears which is perfect.

However, when I scroll up and stop in the middle of the page, the top menu bar appears which overlays on top of my content. 

I want to see my logo and menu bar only when I reach the top of the page. Any idea how to solve this issue in Carson template? Thanks!

On 9/19/2021 at 4:43 PM, TakExplores said:

Site URL: https://swan-arugula-5f75.squarespace.com/

Website pswrd: 12345678

When I scroll down my page, the top menu bar disappears which is perfect.

However, when I scroll up and stop in the middle of the page, the top menu bar appears which overlays on top of my content. 

I want to see my logo and menu bar only when I reach the top of the page. Any idea how to solve this issue in Carson template? Thanks!

Add to Design > Custom CSS

header#siteHeader.show {
    position: relative !important;
}

On 9/20/2021 at 8:43 AM, tuanphan said:

Add to Design > Custom CSS

header#siteHeader.show {
    position: relative !important;
}

 

is there a way to do this with the header/menu still transparant/overlayed over the image?

On 1/13/2022 at 1:47 AM, jwbranton171 said:

is there a way to do this with the header/menu still transparant/overlayed over the image?

What is site url?

13 hours ago, tuanphan said:

What is site url?

it's joshbranton.com

On 1/15/2022 at 1:49 AM, jwbranton171 said:

it's joshbranton.com

Try this CSS

header#siteHeader.show {
    position: absolute !important;
    top: 0 !important;
    z-index: 9999 !important;
}