Clarity: Navigation not responsive

[essivision]

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

I used clarity-ui in my static project (without angular). Now I wanna to use Navigation, but it's not responsive in mobile and tablet correctly like what see in https://vmware.github.io in mobile version.

What should I do for view nav in responsive? Is work just with Angular or No?

• Clarity version: 0.10.6

• OS and version: Windows 10

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[hippee-lee]

Hi @essivision
This is a great question for StackOverflow. You can tag it with vmware-clarity along with a plunker that shows the issue you are encountering.

[pumano]

Check https://vmware.github.io/clarity/documentation/v0.11/navigation

If I understand properly, angular classes needed for making it responsive. I got it only when I change html elements to clr-* angular components for example clr-main-container and etc as described in docs.

[essivision]

Only I use CSS of Clarity and my project isn't angular. I think clarity CSS is reponsive

[hippee-lee]

If you want to activate responsive navigation in a project that doesn't use the angular components (clr-main-container & clr-header) You will have to write the JavaScript that makes sense for your application and couple that to the clarity-ui html structure.

Closing this because making navigation responsive in a non @clr/angular application will be custom for each clarity-ui application thats implementing responsive navigation.

[essivision]

My problem doesn't solve. Please at least help me to develop it manually

[hippee-lee]

Hi there, developing responsive navigation is pretty well documented. Here are a couple of reources that I hope will help you get started for your apps framework.

1. http://responsivenavigation.net/
2. https://medium.com/level-up-web/20-responsive-navigation-solutions-examples-codes-21644390afeb

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.