Mobile menu using a global block

Support
#1

I have a curious problem (request for help) for those with a Pro Header/Global Block understanding. Using the ‘normal’ collapsed navigation element leaves background/design lacking in options. I have created a global block to be used in the header as a ‘content area off canvas’ that has a slightly nicer design element.

My problem is I can’t replicate the menu structure of the ‘collapsed navigation’ element. ie the sub menus want to hover rather than show under their parent menu item.

Does anyone know how I can achieve the standard menu navigation found in collapsed navigation element but within a global block?

example in this link (on mobile sizes only)
https://woocommerce-98372-631739.cloudwaysapps.com/

#2

Hello Scot B,

Thank you for the details. Please be advised that navigation inline and navigation dropdown element may be used for desktop screens. For best results in smaller screens, you can use the navigation collapsed or navigation layered element. The submenus in this element will either collapsed or display as layered once you click on the submenu indicator. There aren’t any other elements displays the submenus once you hover over it.

Hope this helps.

#3

Hi RueNel,

Did you try the example link? navigation collapsed in global blocks does not work so well.

Is there a way to steal some code to imitate the header version of navigation collapsed so that sub menus open like an accordion rather than a floating window

#4

Hello Scot B,

Yes I did check your example url. I see that you are using Content Area Off Canvas and have inserted the Global Block in it. Regretfully you are not using the navigation collapse element inside the global block. I can see that you are using navigation inline which is why it is not displaying like you want it to be. Please edit your global block and change the navigation inline to navigation collapse element.

Please let us know how it goes.

#5

Hi @RueNel

My apologies, I thought I had tried the collapsed navigation earlier within the global block and when i tried that all I got was the toggle to open up the menu

I have tried again this morning and all is working perfect. Not sure what I have done differently and thank you for your patience

https://woocommerce-98372-631739.cloudwaysapps.com/

#6

Hey Scot,

Glad it’s working perfectly now. I’m not sure why you saw a toggle but I’ve just tested adding a Navigation Collapsed to a Global Block and added the Global Block to a Content Area Modal and the Navigation Collapsed displayed the menu out of the box or without the toggle button.

I checked your site and you have reverted to the Navigation Inline. You must use the Navigation Collapsed as Ruenel suggested as it is not simple to replicate the Navigation Collapsed’s behavior.

Thanks.

#7

@christian_y Thank you for getting back to me…

re why I was getting the toggle… no idea, probably user error somehow

as for Navigation Collapsed… I am using it (on smaller screen sizes) already and it works perfectly. Were you only looking at the desktop size?

#8

Hey Scot,

Nope, I was looking at the mobile view. It looked broken previously but now, it’s working like in your screenshot. Probably just the cache.

Thanks.

#9

After your first reply I did clear the cache so it probably was that

All good, and thank you for your help

#10

You’re welcome, Scot.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.