Hi there
On mobiles how to show the full top-menu, so all links are visible (and not the menu button)?
Thank you.
Hi @mplusplus,
Please try the following code:
@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu {
display:flex;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-res-menu {
display: none !important;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu {
position: static;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu a{
font-size:10px !important;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-res-menu i {
padding: 2px 12px;
}
}
The CSS code should be added in the "Custom CSS code" textarea, located in the Dashboard > Forums > Settings > Style admin page, "Custom CSS Code" textarea.
Hi again,
On mobiles, this is hiding the menu items on right. Is it possible to change the code to wrap the menu on mobiles, please?
Thanks.
Please delete the code provided above and use the following one.
@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu {
display:flex;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-res-menu {
display: none !important;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu {
position: static;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu a{
font-size:10px !important;
}
#wpforo #wpforo-wrap #wpforo-menu li a{
padding: 15px 17px;
}
}
However you'll still need to do some CSS customization as well.
As far as the wpForo menu is a regular WordPress menu I'd also suggest you use some additional plugins for this. I've found the following plugin. Please checked it. Probably it'll allow to get your issue resolved.
WP Mobile Menu — The Mobile-Friendly Responsive Menu: https://wordpress.org/plugins/mobile-menu/