Notifications
Clear all

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

8 Posts
2 Users
0 Likes
980 Views
Hype Matrix
Posts: 72
Topic starter
(@hypematrix)
Estimable Member
Joined: 2 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: 3 years ago

Noble Member
Posts: 828
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;
}
}
Reply
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

@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;
}

Reply
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

@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

Reply
Tutrix
(@tutrix)
Joined: 3 years ago

Noble Member
Posts: 828

@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

Reply
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

@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;
}

Reply
Tutrix
(@tutrix)
Joined: 3 years ago

Noble Member
Posts: 828

@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 😉 

Reply
Hype Matrix
(@hypematrix)
Joined: 2 years ago

Estimable Member
Posts: 72

@tutrix

Thanks 🙂 

Reply