Notifications
Clear all

wpForo 1.x.x [Solved] On mobiles how to show full top menu, so all links are visible and not the menu button?

5 Posts
2 Users
2 Likes
550 Views
mplusplus
Posts: 124
Topic starter
(@mplusplus)
Estimable Member
Joined: 3 years ago

Hi there

On mobiles how to show the full top-menu, so all links are visible (and not the menu button)?

Thank you.

Topic Tags
4 Replies
Alvina
Posts: 1872
Moderator
(@alvina)
Member
Joined: 3 years ago

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.

 

mplusplus
Posts: 124
Topic starter
(@mplusplus)
Estimable Member
Joined: 3 years ago

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.

2 Replies
Alvina
Moderator
(@alvina)
Joined: 3 years ago

Member
Posts: 1872

@mplusplus,

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/

mplusplus
(@mplusplus)
Joined: 3 years ago

Estimable Member
Posts: 124

@alvina

Thank you so much. This worked like a charm 🙂

Share: