WAIT: Not able to hide the toggle icon for mobile breakpoint in toggle open state and scrolling not working in mobile landscape for toggle open

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

Dear Bricks Builder Team,

My header menu consists of logo, nav nestable and share icon. Nav nestable contains 7 nav link items and 1 dropdown. Dropdown contains 4 nav link items. For mobile breakpoint, I want to show the menu items text left aligned with some padding and the dropdown icon right aligned with some padding. Dropdown icon when expanded should have similar alignment like the main items ( Currently it is almost working, although the dropdown menu text is showing right aligned, better to show it left aligned ). My concern is when toggle open, I am not able to hide the hamburger icon. Second is in mobile landscape, in toggle open page, scrolling is not working .

Structure

Section

  Container
    Block
      Logo
      Nav Nestable
        Nav Items
          Nav Link
          Nav Link
          Nav Link
          Nav Link
          Nav Link
          Nav Link
          Nav Link
          Dropdown
            Content
              Nav Link
              Nav Link
              Nav Link
              Nav Link
          Toggle (Close Mobile)
       Toggle ( Open Mobile)
      Icon

Bricks Builder → Settings → CSS code

First trial

/* mobile menu panel only */
@media (max-width: 991px) {
.mobile-header-nav .bricks-mobile-menu-wrapper {
overflow-y: auto;
max-height: calc(100dvh - 80px); /* keep below header; use safe dynamic viewport */
-webkit-overflow-scrolling: touch;
padding-top: 80px; /* keeps menu below header */
z-index: 999;
}

/* layout of menu items */
.mobile-header-nav .bricks-mobile-menu-wrapper .brx-nav-nested-items {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}

.mobile-header-nav .brx-nav-nested-items > li { width: 100%; margin-left: 3rem; }

.mobile-header-nav .bricks-mobile-menu-wrapper .menu-item > a {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 14px 24px;
text-align: left;
}

.mobile-header-nav .menu-item-has-children { position: relative; }

.mobile-header-nav .brx-submenu-toggle {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}

.mobile-header-nav .sub-menu {
display: block;
width: 100%;
padding: 6px 0 10px 0;
margin: 0;
}

.mobile-header-nav .sub-menu a { display: block; padding: 12px 24px 12px 42px; text-align: left; }

/* keep header above menu */
header, .brxe-header { z-index: 9999; }
}

2nd trial

@media (max-width: 991px) {

  /* =========================================
     MOBILE MENU PANEL ONLY
  ========================================= */

  /* Offcanvas menu wrapper */
  .mobile-header-nav .bricks-mobile-menu-wrapper {
    overflow-y: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;

    padding-top: 80px; /* keeps menu below header */

  }

  /* Main UL */
  .mobile-header-nav .bricks-mobile-menu-wrapper .brx-nav-nested-items {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0; /* remove 2rem spacing */
    width: 100%;
  }

  /* Main menu LI */
  .mobile-header-nav .brx-nav-nested-items > li {
    width: 100%;
    margin-left: 3rem;
  }

  /* Main links */
  .mobile-header-nav .bricks-mobile-menu-wrapper .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    padding: 14px 24px;

    text-align: left;
  }

  /* Dropdown parent item */
  .mobile-header-nav .menu-item-has-children {
    position: relative;
  }

  /* Dropdown toggle icon */
  .mobile-header-nav .brx-submenu-toggle {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Submenu wrapper */
  .mobile-header-nav .sub-menu {
    display: block;
    width: 100%;

    padding: 6px 0 10px 0;
    margin: 0;
  }

  /* Submenu links */
  .mobile-header-nav .sub-menu a {
    display: block;

    padding: 12px 24px 12px 42px;

    text-align: left;
  }

  /* Fix landscape scrolling */
  .mobile-header-nav .bricks-mobile-menu-wrapper {
    height: 100vh;
  }

  /* IMPORTANT:
     keep header visible above menu */
  header,
  .brxe-header {
    z-index: 9999;
  }

  /* Menu panel below header */
  .mobile-header-nav .bricks-mobile-menu-wrapper {
    z-index: 999;
  }
}

For hiding tried this code, didn’t work

.brx-open .bricks-mobile-menu-toggle { display: none !important; }

or

.show-mobile-menu .bricks-mobile-menu-toggle { display: none !important; }

or

.bricks-mobile-menu-toggle\[aria-expanded=“true”\] { display: none !important; }

Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue

Video: Jam

Best Regards,

D. Mallick

2

Hi @adminar,

Thanks for the report. I formatted your post a little bit to fix the code quotes and make the CSS easier to read.

I checked the Try Bricks example you shared. In that setup, I can’t reproduce the hamburger remaining visible: once the Nav Nestable mobile menu is opened, the “Toggle (Open: Mobile)” is hidden and the “Toggle (Close: Mobile)” inside the menu is shown.

One thing I noticed: most of the custom CSS in your post targets the regular Nav Menu markup, not the Nav Nestable markup. For Nav Nestable, selectors like these won’t apply:

.bricks-mobile-menu-wrapper .bricks-mobile-menu-toggle .sub-menu

Nav Nestable uses different selectors, for example:

.brxe-nav-nested.brx-open .brx-nav-nested-items .brxe-toggle .brx-submenu-toggle .brx-dropdown-content

So the issue is/was most likely caused by custom CSS targeting the wrong element structure, or by the header/menu z-index customizations.

Regarding scrolling: when the Nav Nestable mobile menu is open, Bricks intentionally disables body scrolling with body.no-scroll. The scrollable element should be the mobile menu list itself, .brx-nav-nested-items, not the page behind it.

Can you let me know full replication steps maybe, on the Bricks Playground?

Thank you,
Matej

3

Hello Matej,

Thank you for your reply. I have removed the custom coding in Bricks→Settings. Please let me know if you need any further details, or if I should share the template exports created in the playground to help replicate the issue.

We are encountering the following issues with the mobile and tablet navigation:

  • Mobile Landscape: Menu items appear behind the header’s logo and search button instead of below them, and the menu is not scrollable.

  • Mobile Portrait and Tablet: The top one or two menu items are sometimes obscured by the header, and the toggle button remains visible rather than hidden. The dropdown icon needs slight right alignment with padding.

  • Menu Height: The mobile menu only fills the screen partially instead of extending fully below the header menu when the toggle is active.

Please let me know how we can proceed with a solution.

Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue

Video: Jam (0.17s - 0.50s )

Best Regards,

D. Mallick