Classic navigation menu issue

Hi Everyone,

I have 2 reusable elements for navigation. Left side bar for desktop and bottom navigation for mobile. And, for responsiveness have set them to be visible/hidden at parent width =700 respectively. Initially, I had set conditional visibility on the elements, but since the ‘collapse vertically’ doesn’t work with it, I had to set them up using hiding rule in the ‘responsive’ tab.

This works as expected, except the floating property. If I place them in a floating group either in the reusable element tab or on the pages, then I can’t control the hiding rule leading to issues. Has anyone able to figure out the solution for this?

Thanks

Where is the floating property. On the main page or on the reusable itself?

I’ve gotten this to work in the past but without the reusable part. I mostly use the reusable for the content area not for the navigation. What I had was a floating group on the left, the full height of the page. Then I had another floating group as wide as the page, at the very bottom of the page for the icons / mobile view.

Ultimately I decided to ditch the mobile bottom floating group and stick with the sidebar navigation. I can use the sidebar from 2560+px wide to 320px without the headaches.

1 Like