Toggle Custom Menu Visibility

Greetings y’all! I’m working on a custom navigation menu which will only display on XS breakpoint. I followed Eldar’s tutorial on how to make the custom sidebar, which is great but mine didn’t go as expected. I have an icon which will toggle the custom menu and it works, the only issue is that the menu is displaying at the website startup. Visibility is set to none, I don’t know what could be going wrong.

That is what my website looks like upon start. I also tried previewing in browser, and when I shrink the width it automatically shows the menu.

Hi @Arlish. Which of Eldar’s videos are you referring to? It’s a bit of a shot in the dark without any details.

1 Like

Oops! I’m referring to this one. Sorry, I thought I had referenced the video.

Hi @Arlish.
Are the following set correctly?

Yup, the same settings.

PM me the file and I’ll have a look for you.

@Jerry Ok. I moved this to a separate project hoping it would work but I’m still getting the same results.
You can download my blocs file here. This is how the system should work:

Large & Medium Breakpoints: normal nav bar
Small & XS Breakpoints: the mobile-menu class should toggle from the company icon.
The Issue: the mobile-menu is being toggled on from the startup of the page.

Remove the .mobile-menu class from the mobile menu.

When you click the logo, it adds the class to the bloc via the ID. You are starting with the Menu set to visible with the class there.

1 Like

I can’t believe it was that simple :joy::joy::joy:
So, if I did understand the right way… this toggles the class that should be in the Class Manager but shouldn’t be applied to any bloc?

I haven’t watched the video, but toggling a class adds it or removes it depending on if its there or not on the target ID.

My approach would be different, purely from a management preference (especially if you come back to a project months later), I would create a class like

.mobile-menu for the menu bloc, But I would use an addition class like .show to toggle visibility.

But lots of ways to do it.

I probably would avoid using the branding logo to toggle the menu too, it may cause confusion, as usually the logo will link to the home page.

1 Like

Oh got it.

.mobile-menu for the menu bloc, But I would use an addition class like .show to toggle visibility.

That makes a lot of sense, I’ll try doing that.

I probably would avoid using the branding logo to toggle the menu too, it may cause confusion, as usually the logo will link to the home page.

Yeah I was thinking about it too, tried using the logo for this 'cause it looks cleaner if that’s the only item centered in the screen (on XS breakpoints). But I may switch to the hamburger icon too.

Thanks for the help!

1 Like

Well, all sorted before I woke up. That’s awesome! I can go back to bed now :upside_down_face: :sunglasses: :laughing:

2 Likes