Is there a way to build responsive navigation using build in navigation component in Sitecore SXA?
I tried to apply navigation-mobile class, but it doesn't adapt the mobile layout.
Thanks in advance.
-
could you explain what do you mean by responsive navigation? If you describe your expected behavior more precisely (images will be welcome) I will tell you if this is possible or not.– Alan PłócieniakDec 4, 2017 at 18:52
-
I am looking for description of navigation classes. Which classes should apply to navigation items so it can adapt mobile layout? Also hide under main navigation doesn't work for me as well. Thank you for your help in advance. Do you know any demo site or tutorial/videos etc?– DiscoveryJan 2, 2018 at 17:45
-
This is not an answer to my question. I still don't know what are your expectations.– Alan PłócieniakJan 3, 2018 at 16:29
-
Sorry. Let me rephrase the question. How do I get the Navigation component to work in SxA? Any Demo site or sample would be useful. Thank you– DiscoveryJan 3, 2018 at 16:59
-
1Let me know if this article works for you. michaellwest.blogspot.com/2018/02/hamburger-menu-in-sxa.html– Michael WestFeb 25, 2018 at 18:44
Add a comment
|
2 Answers
A quick way is to use the Toggle component.
- Add a Toggle component where you want your "menu" toggle should be.
- Put a Navigation component with
navigation-mobileclass in the toggle's placeholder. - Update the old navigation component's visibilty under the Grid's Advance tab to only show up on Desktops and Large Desktops.
- Update the Toggle's visibility to only show up for Phones and Tablets.
Of course this isn't optimized and may not even look close to what you need but it is a responsive mobile nav.
If you want another solution, you can take a look at my blog post.
For navigation component to work, you need to create that page under Home item, using Page data template. After that, add navigation component in your page and select the style as horizontal/vertical/sidebar.
