Hey Sizam, I thought I would give you an update after my deep-dive. During troubleshooting, I removed all plugins and tried with Child Theme. That didn't work. Switched to main Rehub Theme. This still had the bad behavior of menu on mobile. So, I did a fresh install of ReHub. Replaced the Child Theme. I applied this solution to resolve the problem which only seemed to occur when I changed the size of the window or looked at it on mobile. And it worked! Hope this helps.

/* ===== MOBILE MENU FIX: Rehub Off-Canvas ===== */

@media (max-width: 1024px) {

  /* Force vertical stacking and spacing */

  .off-canvas-active.menu {

    display: block !important;

    flex-direction: column !important;

    background-color: #fff;

    padding: 1rem;

  }

  .off-canvas-active.menu li {

    display: block;

    margin-bottom: 10px;

  }

  /* Ensure nested submenus are stacked */

  .off-canvas-active.menu .sub-menu {

    padding-left: 15px;

    border-left: 2px solid #ddd;

    margin-top: 5px;

  }

  /* Toggle icons (arrows) */

  .submenu-toggle {

    display: inline-block;

    float: right;

    font-size: 1rem;

  }

  /* Back button style */

  .back-mb {

    font-weight: bold;

    margin-bottom: 10px;

    cursor: pointer;

  }

  /* Make sure menu closes properly */

  .close-menu {

    display: block;

    text-align: center;

    margin-top: 15px;

  }

  /* Optional: limit max width for better appearance */

  .dl-menuwrapper {

    max-width: 100%;

    box-shadow: none;

    border: none;

  }

}

Hi there, Sizam!

That is likely the case — I’ve been actively trying to adjust the menu configuration since I submitted the ticket, in hopes of resolving the issue myself.

At the moment, I’m using the CSS classes rh-megamenu rh-mobile-linkable in the “CSS Classes” field for the top-level menu items that have submenus. My goal is to make the top-level item clickable (thus the rh-mobile-linkable class) while ensuring that submenu items display properly beneath the top-level item.

The issue I’m experiencing specifically happens on mobile and tablet views. When the hamburger menu is clicked and the slide-out menu appears, the submenu items are displayed horizontally instead of vertically — making navigation very difficult on smaller screens. I’ve attached a screenshot so you can see what I mean.

To try resolving this, I’ve referenced your documentation on mega menus and attempted to implement the classes accordingly:

https://rehubdocs.wpsoul.com/docs/rehub-theme/basic-settings/mega-menus/

It’s possible there is a conflict with a child theme style, a missing class, or a deeper layout issue — but I haven’t been able to pinpoint the cause. Could you please take another look or let me know if there are specific conditions that need to be met for mobile menus with submenus to display vertically?

Thanks so much for your time and help!

Best,

Amanda

I can't see mega menus on your site. Maybe you already removed them

Menus and submenus on mobile are displaying horizontally instead of vertically, despite using the CSS classes as recommended in ReHub documentation. I removed them and still the problem persists. The .sub-menu items seem to inherit flex styles, causing them to wrap horizontally. I would like standard vertical dropdowns instead. Can you advise how to resolve this within the theme’s settings or CSS? Thanks in advance.