Navigation System Possible in Blocs?

I’m wondering if a navigation system can be constructed with Blocs that looks like the attached image. In this system, there would be a hamburger menu that when clicked would display the full-width drop down below the navbar?

I thought I could do this easily but I have had no luck figuring it out. I have seen people doing this but I have no idea how it was accomplished. Having an example showing how to make this possible would be huge!

1 Like

So can anybody tell me how to do this in Blocs?

Just create it as a standard block using the number of columns needed. Create the text and hyperlinks as required.

Add another standard bloc above the menu bloc in which to create the logo and hamburger link (no need to use the built in navigation bar options) Make this a two column bloc and add your logo to the left bloc Inside an image bric and a hamburger icon in the right of the bloc (also via an image bric) Align and size the elements as required. With the hamburger icon selected, create an interaction of “Toggle Visibility” and target the menu bloc id. Select the menu bloc and remove its visibility. When you preview, clicking the hamburger icon will cause the menu to appear. Clicking again will cause the menu to disappear.

You can enhance the design a little more by adding an X icon next to the hamburger icon. This will have the same toggle visibility interaction, only it should now target the id’s of the hamburger icon, the menu bloc and the X icon. Its initial visibility will be set so that it isn’t visible. On the hamburger interaction, add the X icon and hamburger icon id to the target list in the interactions section. In preview, clicking the hamburger Icon will cause the menu to appear AND the X icon to replace the hamburger Icon. When the X icon is clicked, the menu will disappear and the hamburger icon will reappear.

Instead of using images, you could use buttons. You would then create a class for each button to add the hamburger and X image to the button background.

2 Likes

OK, those all sound like solid ideas I will give this a try to see if I can make it work sounds very doable. Not sure what happens when a link is selected as it should hide the menu, but I will cross that bridge when I get there.

Much appreciated!

Just wanted to follow up on my progress creating this style of navigation with Blocs 3.

Most of it was pretty straightforward but there were a couple of hiccups until I learned a few very subtle things about Blocs.

Here is a look at the final appearance of the system I implemented. In general, it is working well, there are a couple of Blocs idiosyncracies that I hope to conquer at some point.

Collapsed navbar.

Expanded nav system

Normally these types of the system seem to be hard to make sticky, but by doing this all within the navbar I was able to get support for it being sticky with no work on my part, great!

4 Likes

Looks perfect to me!!!

1 Like