Streaming live at 10am (PST)

Navigation Menu Transition

Does anyone know how to make this transition work for the navigation menu? I’m trying to get my nav menu transition with the body background. https://www.dockyardsocial.com/

Here’s the read-only link for my site:


Here is my public share link: LINK
(how to access public share link)

For more context, I keep running into an issue where the navigation menu is transparent and the body content is being seen in the nav.

Hi @jeroesguerra,

On your read only link I am not seeing any content in the nav bar besides the site logo. I can help but I’m not sure what is being animated.

Hey @Andrew_Coderre,

As of right now, it is just the logo.

But if you scroll down the site, you’ll notice the content being seen in the background.

Oh I misunderstood your original request, I thought you meant the actual nav opening interaction. But I am still at a loss unfortunately, in your preview link for me I am not seeing the issue:


Best I can tell it is working how you’d like? Maybe you changed it since my first reply?

If I am understanding correctly now your complaint is that you could see the scrolling content behind the top navigation bar, right?

Hmmm. Let me resend the share link:

Ah I see now.

I’m going to make a recommendation that will probably make things a little easier. I see that within every section you have a background holder, and then a coloured background within each section and they all have a fixed position. Then your section in and out interactions just alters the opacity.

If you wanted to do it the way you have it now, you could have only one background-holder and then all of your coloured background div's inside of it. Since it is fixed it can be placed within the body rather than a section, it is not necessary to have a fixed position background-holder in every section. Then you can set the section scroll into view trigger to affect the opacity for the corresponding bg-1 blue or bg-2 purple etc. At the same time as that interaction, you can set the nav-section background colour to change to match the div.

What I recommend is deleting the header-background & background-holder's altogether. Set the background colour of your body and nav-section to the first blue(#42c3d9). Then create a scroll-into-view trigger for each section, and a simple animation like this:


Make an individual animation for each section, and DO NOT give either element an initial state because the body and nav-section have already been set to blue.

Make sure to create a scroll into view interaction for the very top section as well so that when the user scrolls back to the top it changes back to blue. Only on this section you can give the animations an initial state.

Hopefully this makes sense. Its a lot more light weight and easier to troubleshoot than having all of the fixed background holders I would think.