Mobile menu collapsed by default

How To
1

Hey there,
i’m wondering if there is a way to show the mobile menu collapsed by default so to show all the submenu at a glance.

Thanks!

2

Hi Tenentecartina!

Depending on your css/javascript skills, you may want to take a look at some of these solutions:

Other than that, mobile menu functionality is not fully fleshed out in Bricks just yet. You can vote it up: Ideas – Bricks

2 Likes
3

Hi @tenentecartina @Sergio,
maybe something like this will do the trick.

root .bricks-nav-menu .sub-menu {
  opacity: 1;
  visibility: visible;
}

I can’t test it at the moment so please give it a shot and let me know if it works.

Best regards,
timmse

1 Like
4

ey @timmse Thanks for you ruspport
i tried your code but no luck. The style apply only to the desktop menu, while the mobile (that is the one i want to target) isn’t affected.
Thanks anyway

5

Hey,

wrap it in a media query so it will only act like this until it reaches the breakpoint.

@media (max-width:478px) {
  root .bricks-nav-menu .sub-menu {
    opacity: 1;
    visibility: visible;
  }
}
6

Hey @timmse thank you,
i barely know css maybe it’s my fault but i’not able to let this code works.
I put your code in the custom css of the menu module but nothing happened.
Thanks

7

Hey @tenentecartina,
please give it a try to this snippet in Bricks/ Settings/ Custom Code/ Custom CSS:

@media (max-width: 478px) {
  .bricks-mobile-menu .sub-menu {
    display: block !important;
  }
}
2 Likes
8

Thanks @HeroRox , i already tried this way but still no luck :frowning:

9

display: block !important;

10

It works only on the mobile breakpoint, like you wanted. Or did i get something wrong?
See this video - expanded sub menu items on mobile.

I did not change any setting on the menu except for the custom css from above.

Without an example as link, video or at least screenshot this is just like playing hide and seek in the dark :smiley:

1 Like
11

EY @timmse
please watch the screencast Screencastify

What i would achieve is to have a mobile menu fully collapsed (as is in the builder window). If i use your code (also tried with the code from @HeroRox ) the menu is still closed.

Thanks for your support
Andrea

(post edited with new screencast link)