Responsive menu toggle remains invisible after adjusting mobile breakpoint to 1500 px

demian15

Hello,

I’m using BeTheme on our site extrion.nl and would like the mobile navigation (hamburger menu) to appear sooner on larger screens (at widths < 1500 px). I’ve searched through the Theme Options but couldn’t find a built‑in setting to adjust the mobile breakpoint. If there is an easier way to configure this in the theme settings, please let me know — I may have overlooked it.

To work around this, I tried hiding the desktop navigation and forcing the responsive menu toggle to appear via custom CSS:

/* Hide desktop nav & show the mobile toggle below 1500px */

@media (max-width: 1499px) {

  #Top_bar .menu_wrapper {

    display: none !important;

  }

  #Top_bar a.responsive-menu-toggle {

    display: block !important;

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

  }

  #Top_bar a.responsive-menu-toggle i {

    color: #fff !important; /* white icon */

  }

}

This CSS hides the desktop menu at the desired width, but the hamburger icon still doesn’t appear (see attached screenshot). Developer Tools show the <a class="responsive-menu-toggle"> element in the markup, yet it remains invisible. I’ve tried adjusting z-index, colour, positioning and clearing caches, but the toggle stays hidden.

Is there a specific option in BeTheme to set the mobile breakpoint that I might have missed? Or is there another stylesheet/script rule that overrides the visibility of the responsive menu toggle? Any guidance on enabling the hamburger menu at a custom breakpoint would be greatly appreciated.

Thank you!