2

I ran into a weird issue with the navigation component and I can't find what the problem is.

enter image description here

This is the navigation I have. The selected styles are "Main Navigation - Drop down vertical" and a custom style that adds some spacing (the problem is still there if I remove the custom style.) There should be an FAQs page under About but for some reason the dropdown doesn't work.

If I change the style to "Mobile Navigation" the FAQs link is there:

enter image description here

Here is a screenshot of the navigation settings:

enter image description here

If you have an idea about what the problem might be I would appreciate your help!

  • Can you check whether the faq navigation item is in the html source when using the drop-down vertical? If so, I will elaborate in an answer as that means you are facing the same issue I had.. – Gatogordo Jul 18 '17 at 16:11
  • Yes, it's in the html source, and all the right classes for the submenu/dropdown are there but it still doesn't work. – andrei Jul 18 '17 at 16:40
1

We noticed this behavior in on of our projects as well and it was acknowledged as a bug (nr 6374) by Sitecore support - so it should be fixed someday but I don't think it already is. We had a navigation that seemed to have the correct elements in the html but didn't show the lower levels.

Luckily it can be easily fixed: what we found was that there is some extra html that gets in the way:

Apparently the sxa script doesn't take in consideration the extra div on the navigation items. The trigger is on ".rel-level1 > a" , but the html is something like:

<li class="level1 submenu item4 odd last rel-level1"> <div class="field-title"><a title="..."> href="/en/...">...</a></div>

So the div in the li breaks the trigger. This also means it can be fixed it by changing the default rendering variant of the navigation component of SXA:

  1. Go to /sitecore/content/.../Presentation/Rendering Variants/Navigation/Default in the content editor
  2. On each child (NavigationTitle, Title, __Display Name) set the Tag field to empty (no more div).
  3. Publish the variant

You could also create a new variant for this if you want (copy the original and make the changes).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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