Join the Webstudio community

Updated last month

Issue when importing from the SaaS template

At a glance

The community member is trying to copy-paste the Nav element from the SaaS Landing Page template to their project, but they are getting the message "NavigationMenu Viewport is missing". After some discussion, it is revealed that the community member had cloned the project a couple of weeks ago, and the Viewport Container is missing, which is required for handling dropdowns.

Another issue the community member is facing is that the menu items' chevrons don't rotate on hover after copying the Nav element to their project. The community members provide suggestions to fix this, such as adding a CSS variable to the button and using it on the icon, or inserting a new navigation menu. However, the community member is still confused about why the "--navigation-menu-trigger-icon-transform" variable is not visible on the button from the official template, and why the transition variable is not fully transmitted when copied-pasted to the target project.

Useful resources
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