Join the Webstudio community

Updated 2 weeks ago

Issue when importing from the SaaS template

I’ve been trying to copy-paste the Nav element from the SaaS Landing Page template to my project but I get the following message : "NavigationMenu Viewport is missing". What should I do?
J
S
18 comments
Which instance are you selecting exactly? Trying to reproduce it
Damn... my bad. I cloned it a couple of weeks ago but the Viewport Container is missing. That's why. Really sorry about that, I should have doubled checked first.
I’m not familiar with the Viewport Container element. Why is it used exactly? Some templates like Positivus don’t have it while others do. Is it for handling dropdowns?
Yeah its for having dropdowns and np
I’ve installed Animotion and copied-pasted the Nav element, but the menu items’ chevrons don’t rotate on hover.

Here’s the link : https://p-e4591505-6a76-40b6-92c6-d0c5af7875b4.apps.webstudio.is/?authToken=09dfd46c-2ac6-4fac-9df3-0e2b11ae1581&mode=preview

You have to go to Components > Navbar to see it.

Any idea why it wouldn’t work?
There is a css variable to add on the button. set it to 0 deg by default
then on hover you can change the value
and use that css variable on the icon. Hover parent > modify child is the pattern
Or you can just insert a new naviagation menu and it should have it
Got it. It's weird because I don't see this variable in the former template
There was this rotate variable but stil it didn't make the chevron rotate
the variable just defines the value, it must be then used on the rotate property of the child
Actually it looks likes its beeing used but it isnt defined on the parent
It's all good now, thanks for the hand. I'm just confused about why the "--navigation-menu-trigger-icon-transform" variable is not seeable on the button from the offical template, and still the chevrons manage to rotate
Also the transition variable on the former button is not fully transmitted when copied-pasted to the target project
Add a reply
Sign up and join the conversation on Discord