Notifications
Clear all

wpForo 1.x.x [Solved] Static mobile menu doesn't fit

8 Posts
2 Users
0 Likes
1,319 Views
Posts: 76
Topic starter
(@hypematrix)
Estimable Member
Joined: 3 years ago

Hello,

I'm using the following code for the static mobile menu but the search icon doesn't fit on the end of the menu, is there any way around this? maybe shrink the gaps in between the menu items?

@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; text-align: center;
}

Please see attached.

Thanks

7 Replies
7 Replies
Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1268
Posted by: @motorhype

maybe shrink the gaps in between the menu items?

try

@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu li a {
    padding: 15px 10px;
}
}
(@hypematrix)
Joined: 3 years ago

Estimable Member
Posts: 76

@tutrix 

That worked thanks, I just added it underneath the old code, do I need to remove any or all of of the old 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; text-align: center;
}

(@hypematrix)
Joined: 3 years ago

Estimable Member
Posts: 76

@tutrix

I'm now left with the following code, is any part of it unused and can be removed?

@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; text-align: center;
}
}
@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu li a {
padding: 15px 10px;
}
}

Thanks

Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1268

@motorhype

You have this code twice, you can delete one

@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu li a {
padding: 15px 10px;
}
}

otherwise it's ok

you can test everything from the browser inspector

watch the Video https://www.screencast.com/t/i55WlLUUXrX

(@hypematrix)
Joined: 3 years ago

Estimable Member
Posts: 76

@tutrix

Will it safe to delete this:

@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu {
display:flex;
}

Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1268

@motorhype

remove it and you will see the result 😉 

or watch the video again and you will see the result too 😉 
In the video I remove the "a" from the "display" so that the code is not executed

 

or open your page with the Browser Inspector and remove the code, then you will also see the result 😉 

(@hypematrix)
Joined: 3 years ago

Estimable Member
Posts: 76

@tutrix

Thanks 🙂