1

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.

5
  • 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. Dec 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?
    – Discovery
    Jan 2, 2018 at 17:45
  • This is not an answer to my question. I still don't know what are your expectations. Jan 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
    – Discovery
    Jan 3, 2018 at 16:59
  • 1
    Let me know if this article works for you. michaellwest.blogspot.com/2018/02/hamburger-menu-in-sxa.html Feb 25, 2018 at 18:44

2 Answers 2

1

A quick way is to use the Toggle component.

  1. Add a Toggle component where you want your "menu" toggle should be.
  2. Put a Navigation component with navigation-mobile class in the toggle's placeholder.
  3. Update the old navigation component's visibilty under the Grid's Advance tab to only show up on Desktops and Large Desktops.
  4. 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.

2
  • Blog post link is empty. Please update the link. Thanks
    – Discovery
    Jan 26, 2018 at 13:29
  • Ooops....updated.
    – Marco
    Jan 26, 2018 at 16:35
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.