After customizing the layout of the mobile forum menu, the "bell" icon has disappeared from the mobile browser and I can't get it to return. (The desktop browser displays the bell just fine) See attachment for reference. Thanks for any help in advance
@xcoleman17,
Use this CSS code as well.Â
@media screen and (max-width: 620px){
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu li a {
padding: 3px 6px;
}
#wpforo #wpforo-wrap #wpforo-menu li a {
font-size: 10px;
font-weight: 100;
}
#wpforo #wpforo-wrap #wpforo-menu .wpf-menu, #wpforo #wpforo-wrap #wpforo-menu #wpf-menu{
width: 203px;
}
}
Don't forget to try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.
okay thanks, so far the code works well but if I adjust the responsiveness of the page sometimes the icons will overlap the menu tabs (see attachment, this is based upon a 360px x 697px screen), is there anyway for the bell to automatically adjust based upon how its being viewed?
@xcoleman17,
If you display the menu on mobile it'll cause this kind of issues. It's not possible to display the full menu on mobile without this kind of problems. You should either remove the code that displays the full menu on moble or solve the issue yourself.Â
Please note, that we don't provide support for style customization, we may help in 1-2 simple questions related to colors and background but not more. We can not help you customize all components of forum style, these are custom requirements and should be done by forum owners. We only help with general questions and issues.
Thank you for your understanding.
You can find all classes by pressing F12 on the browser and opening Chrome or Firefox Console:
totally understand! Thanks so much for your help I managed to find a solution to my issue by playing around with this custom CSS code:
#wpforo #wpforo-wrap .wpf-bar-right {
min-width: 170px;
}
I am a lot more comfortable with customizing the site now. Thanks again for the insight