/* Add this CSS to your theme's stylesheet or a custom CSS file */

/* Define tablet breakpoint (adjust the max-width value as needed) */
@media screen and (max-width: 768px) {
/* Hide the existing menu on tablets */
.wpforo-menu {
display: none;
}

/* Show a mobile menu icon (you can use a custom icon or the default 'hamburger' icon) */
.mobile-menu-icon {
display: block; /* Show the mobile menu icon */
/* Add styles for your mobile menu icon here (e.g., background-image) */
}

/* Style the mobile menu dropdown */
.mobile-menu-dropdown {
display: none; /* Hide the dropdown by default */
/* Add styles for your mobile menu dropdown here (e.g., background-color, position) */
}

/* Show the mobile menu when the icon is clicked */
.mobile-menu-icon.active + .mobile-menu-dropdown {
display: block;
}
}

Remember to replace the placeholder classes and styles with the actual class names and styles used in your wpForo menu and theme.

I hope this will be helpful to you.

I have a layout problem using the wpforo menu. In a mobile view, the menu collapses to a dropdown with a hamburger icon. This is cool! And on a desktop view, it is a horizontal menu. The problem is that when I view the forum on a tablet, it shows the menu in a horizontal view. Here I 6 menu items, which makes the layout look weird. Is it possible to collapse the tablet wpforo menu into mobile dropdown menu?

Best