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