Incompatible Components?

User 2719045 Photo


Registered User
48 posts

Are the components 'Menu with dropdown' and 'Responsive Menu' compatible? I have a website that will eventually have a large number of pages so want to use 'Menu with drop down' for the desktop version but do not like the way it stacks as space becomes limited. At the mobile breakpoint I want to switch to 'Responsive Menu' instead so that the 'Hamburger' icon shows. Under 'Position' I set display to 'None' for each component at the appropriate breakpoint so each one is only visible when it should be. The problem is that the 'Responsive Menu' will not expand to show the page links on mobile, 'Menu with drop down' works fine.

http://omdtestdomain3.co.uk
User 379556 Photo


Registered User
1,533 posts

I did it by putting each menu in a separate row, and making the rows switch between Display Block and Display None at the breakpoint.

Frank
User 2719045 Photo


Registered User
48 posts

Hi Frank

Thank you for your response. That is how I have set it up on the page, each component is in a separate row, not sure why it is not working for me.

Jeremy
User 379556 Photo


Registered User
1,533 posts

It may be getting covered by the 'About us' item below it. If so, increasing the Z-index of one or more items in that menu row may help. The Z-index adjustment is the antepenultimate item in the Position section of the Design panel.

Otherwise I'm out of ideas, and perhaps others can help.. That it's not an incompatibility between the menus may be seen from my tiny test file.

Frank.
User 2719045 Photo


Registered User
48 posts

Thanks Frank, I'll keep tinkering with the settings

Jeremy
User 2719045 Photo


Registered User
48 posts

I have discovered where I was going wrong, I was making the container invisible (Display = None) rather than the column. Lesson learnt!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.