Nav Links are showing fine in Design mode, but don’t show up in Preview.
It’s never happened before and can’t figure out what’s going on… Please help!
Published:
https://thebeardproject.webflow.io
Hi Mike (or Josh?),
Got em:
You probably have this div setup with an initial state of 0% opacity in an animation somewhere.
Hey Ben/Ozone,
Thanks for the quick feedback.
I do have initial state 0% but it’s only on a mobile button trigger. But I just turned off initial state (republished to see) and now the desktop is fine, but when going to mobile, the nav is open on load.
I thought certain design elements stay separate when designing in mobile vs desktop mode? What am I missing?
I’m still learning but bear with me!
Thanks,
Mike
That’s okay Mike! We all live to learn.
Your styling is tiered in the (mobile) break points with larger screen being sort of an initial master to the smaller ones. If you change styling (position, color, opacity, anything) for a div in desktop - that rule is sent down the line to mobile for all devices to obey.
You then journey from desktop view to ipad view and make changes for the page to fit nicely there - those changes are waterfalled down to mobile horiz and portrait. Your changes in these tiers only go DOWN (smaller) and not up. This lets you work from big to small and not lose the settings for big - even display:none on a div for mobile!
HOWEVER - if you went into mobile for example, and changed settings there - and then went back to desktop to change it there - a value already exists for mobile and it will not inherit the new change from desktop. All customized device styling will always override whatever you change upstairs.
Does that help you out?
1 Like
The initial 0% on the mobile button trigger you mention, is that 0% opacity for that menu div block?
because that would be it.
Setting any class as something (in this case 0%) “initial state” that will actually force that class to have that state on page load. Button visible or not. Initial state, unfortunately, is not conditional. Meaning it will always happen if you define it somewhere and arm a component with that animation, even invisible components.
Thanks for the explanation (very good BTW!)… I do understand the tiered journey in design mode (desktop down to mobile).
And just read your 2nd reply… The mobile button trigger is 0% opacity but I set it after going to mobile. So because it’s not conditional, this means it translates “backwards” towards the top (desktop)??
Yep. To crudely put it; webflow looks at everything that has initial state defined SOMEWHERE and on page load it sets those components as such.\
Edit: The thing takes the word initial very literally 
Ahhh, crapola… Hmm so I need to figure out how to do what I need. Maybe I need to make 2 separate menus to work with (one for desktop and one for mobile)?
Well, not per se. The webflow navbar has a pretty nice mobile design. Your issue is that it is hidden at page load due to that opacity 0. I personally would start by removing that initial 0. IMO navigation should always be in sight (or an icon to expand the navigation)
Double navbar is more work and it will come back to bite you in the but when your structure changes
I wouldn’t want to do double nav work, no doubt!.. I originally used the pre-made nav component/symbol but wanted to do different effects rather than the built-in slide. And couldn’t figure out how to customize the pre-made one, so I built one from scratch. But what you explained (about the expanding icon on mobile) is exactly what I want (I mean, it’s most logical and fairly standard) but just am trying to fully customize.
Ugh, I know I’m prob missing something small and overthinking it…
Oh, and the pre-made one has the nice “open menu” in design mode but unfortunately we don’t have that in “build-from-scratch”…
We do. You just need to drag in the navbar component 
I only build from scratch pages and use that one and restyle everythime. It works nicely on all devices <3
Oh yours has it too! But for some reason clicking th + symbol does not open it. Let me see if I can see why
I tried that but can’t seem to get what I want… BUT – the fade-in, rather than slide-in is another thing… For the built-in component slide-in, it’s already opacity 100, it just moves. Versus fade from 0 (in place)… I think that might be the hurdle.
Yep I’m trying to get it to fade from 0 (in place) rather than slide.
Ahhh gotcha! The issue is somewhere in your interactions. When I remove the 2 page triggers I can click the + and it fades in
But I gotta have my page triggers!, haha… BUT I just noticed… (see included screenshot) the part at bottom where we can check or uncheck Trigger Settings for the different sizes (!) I literally didn’t notice this before. Will this help?
Maybe just have to make sure I’m applying it to the right trigger, of course.
That’s interesting, could be! It’s definitely somewhere in your interactions
THAT’S IT!..I unchecked “Desktop” and “Tablet” for the trigger setting. Wow this is the sh*t! Thanks for helping out. I was about to pack it in for the night.
1 Like