Change when navigation bar transitions to a float

Hi guys! As you can see from my website:

https://adrianmblog.com/

The user has to scroll down a bit too far before the navigation bar triggers the transition for the black box behind the navigation to come in, resulting in some ugly overlap with the title over my page headers. I can’t figure out where to change it so the transition happens higher up?

Thanks!

Hello,

Try to use this CSS code to manually set header background.

You can add CSS code in Customize → Additional CSS section.

#masthead {
    background-color: rgba(0, 34, 47, 0.8);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks for the answer! Unfortunately I think you’ve misunderstood my question. Right now my top nav bar has a transparent background when the scroll bar is at the top. When the user scrolls down enough theres a transition that occurs to bring a darker black background in behind the navigation buttons at the top.

What I would like to know is how to change which height this transition occurs? Right now I think it happens too late.

Sorry for wording my initial question so poorly!

Hello,

What I would like to know is how to change which height this transition occurs? Right now I think it happens too late.

I don’t think that there is an easy way to do it, unfortunately. That’s why I suggested the workaround above. Did you try to apply it?

Kind Regards, Roman.

I did try it but I would really much prefer being able to keep the masthead with a transparent background until the use scrolls down, I just need the background to come in a bit earlier. Do you have any ideas or resources or anything else that could at least point me in the right direction for this?

Thanks so much!
Adrian

Never mind, I fixed it by having a look at the main.min.js file!