Customizing nav banner size

Site URL: https://flatworm-sawfish-bgzs.squarespace.com/

Password :: Flathead22

I am looking to customize the navigation banner to be a white banner that is somewhat small and stays on the screen when scrolled.

Hi. What it should look like?

Ideally, just a white background that isn't too thick so it doesn't take up too much space. It would be nice if it stayed visible with scrolling through the page but I don't care too much about that.

11 hours ago, hudson_lee02 said:

Ideally, just a white background that isn't too thick so it doesn't take up too much space. It would be nice if it stayed visible with scrolling through the page but I don't care too much about that.

Hi. Like this?

Yes, that looks perfect.

I remember it should be an option in Site Styles.

Add to Design > Custom CSS
 

body.homepage header#header {
    background-color: white !important;
}
body.homepage header#header .header-nav-item a {
    color: black;
}
body.homepage header#header .burger-inner>div {
    background-color: black;
}

On 6/14/2022 at 2:50 AM, tuanphan said:

I remember it should be an option in Site Styles.

Add to Design > Custom CSS
 

body.homepage header#header {
    background-color: white !important;
}
body.homepage header#header .header-nav-item a {
    color: black;
}
body.homepage header#header .burger-inner>div {
    background-color: black;
}

 

This looks and is working great, but is only appearing on the homepage. How do I make this site wide and stay the exact same?

9 hours ago, hudson_lee02 said:

This looks and is working great, but is only appearing on the homepage. How do I make this site wide and stay the exact same?

remove body.homepage in the code

This worked, thank you so much.

On 6/14/2022 at 2:50 AM, tuanphan said:

I remember it should be an option in Site Styles.

Add to Design > Custom CSS
 

body.homepage header#header {
    background-color: white !important;
}
body.homepage header#header .header-nav-item a {
    color: black;
}
body.homepage header#header .burger-inner>div {
    background-color: black;
}

How do I make the banner stay visible when you scroll through the page?