I'd like to disable the navigation bar animation when scrolling down.

[Peteledete]

I've designed my entire website to be dark theme. This has gone splendidly aside from one minor issue. When the page is first opened, the navigation bar is transparent. Because I am using dark mode, the dark text blends in very well with the dark background, making it nearly impossible to read. Only after you begin scrolling down does the navigation bar appear and allow users to read the navigation bar. Is there any way to disable this temporary transparency? I've looked through the forms to no avail for days now.

Edit: My site is PCLeaf.com

[PaulMathews]

You'll need to modify your site's css a little bit:

• In the Site Editor, click "Theme" in the top navigation menu bar
• At the bottom of the left-hand sidebar, click "Edit HTML/CSS"
• You'll land in the main.less file that contains your site's css.
• Click the magnifying glass at the top of the code window and enter the search term ".nav .wsite-menu-item". This controls the styling of the menu and you should see the code below except the item in red text.
• We want to modify this to turn the menu link color to white. Add the color attribute and set it to white (that's the red text item below).

.nav .wsite-menu-item {
    color: white;
    display: block;
    padding: 12px 20px;
    border: 1px solid transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

Now, let's remove the header bar transparency.

• Scroll back to the top of the code and click the magnifying glass and enter the search term ".birdseye-header" to find the header bar element styling code (should look like what you see below without the "background" attribute).
• Add a background color attribute and set it to black (see highlighted red text below).

.birdseye-header {
    background: black;
    position: fixed;
    top: 0;
    z-index: 12;
    width: 100%;
    max-width: 100%;
    padding: 20px 40px;
    color: #000000;
    background: #000000;
    border-color: #000000;
    box-sizing: border-box;
    -webkit-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
    -moz-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
    -ms-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
    transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

[Peteledete]

Wow! Thank you so much for the in depth response. I really appreciate you taking the time out of your day to respond to my beginner questions.

The text is readable now, so I'm happy. However, the transparency is still an issue, and it still animates at the top of the page.

I assume it was a mistake on my part. If you could look at it, I'd be even more grateful than you've already made me.

Thank you again!!!

[PaulMathews]

I don't see the background set to black on the birdseye-header class (the second code adjustment). You need to make that change in the code block indicated.

[Peteledete]

You were right. I had missed the colon after background haha! Thanks for your help again.