Hi wpforo community,
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
You can use CSS media queries to apply specific styles for tablets and create a dropdown menu effect.
/* 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.
