Hello,
Good day! In mobile view on some tablet devices, one or more of my Main Menu items wrap to the next line. Since my Main Menu has a background color, I was hoping you could provide me with a way to wrap the color to the next line (full width) so that my wrapped menu items show up properly and my menu background appears uniform.
I hope you have a solution for this.
Philip
I guess this isn’t just a mobile screen issue, but I need a solution for other smaller screens (like netbooks) as well.
Thanks.
Philip
Hi,
Please provide the url so i can take a look.
Thank you, Emil G.
Thanks for looking into this Emil.
Screenshot 1 (this is how the Theme handles menu items that don’t fit on the main bar because of smaller screen size: http://screencast.com/t/qqvWwqHMVJF
What I’d like to have happen if possible: http://screencast.com/t/fbbeH2Gec
Have an Awesome Day!
Philip
Hi,
1. You can try this custom css for tablet screen: http://screencast.com/t/Pi6foUzb7KE
@media (min-width:768px) and (max-width:1200px){
.td-menu-wrap{
height: 100px;
}
}
2. Or you can try to use this custom css if you don’t want two rows on tablet view: http://screencast.com/t/Ty7E2fAWkuk
@media (min-width:768px) and (max-width: 1020px){
.sf-menu > li > a {
padding: 0px 11px 0px 0px;
}
.sf-menu > .td-menu-item > a{
font-size: 14px !important;
}
}
Also please use 20px font size for the main menu items so you will not have menu on two rows for width over 1020px – from Theme Panel > Custom Typography: http://screencast.com/t/1LVf1qk4hzpp
Thanks!
Alin,
Thanks for working with me on this. I have applied the css and reduced the font size per your instructions and I am not seeing the wrapping result in your screenshot. I am using this simulator http://quirktools.com/screenfly/#u=https%3A//tribyoot.org&w=966&h=603&a=23
If there is a better simulator that will show the results you got, please let me know. Maybe I’m missing something. Please let me know.
Philip
Hi,
I see that you changed the font size to 20px and now the menu looks fine on screen over 1020px: http://screencast.com/t/6BlnG4ReI
Also I see that you applied the css code but it doesn’t work without !important – http://screencast.com/t/WQlZryztj so please use !important on the code like this(also for padding) and should work:
@media (min-width:768px) and (max-width: 1020px){
.sf-menu > li > a {
padding: 0px 11px 0px 0px !important;
}
.sf-menu > .td-menu-item > a{
font-size: 14px !important;
}
}Thanks!
Alin,
It’s looking good except I can’t get the menu background to wrap to a second line. What am I missing?
Thanks.
Philip
Hi,
If you don’t want to use css code from above and you like menu’s on two rows on tablets and add background also on second row please try this custom css(I already provided to you 2 solutions above): http://screencast.com/t/6fDwtqq3ybew
@media (min-width:768px) and (max-width:1199px){
.td-menu-wrap {
height: 100px !important;
}
}
You have to add css code in Theme Panel > Custom Css: http://screencast.com/t/13c7Upuj
Thanks!
Alin, thanks so much for sticking with me on this until resolved. The Tagdiv Team is the BEST!. I think the difference between max-width of 1200 and max-with of 1199 made the difference.
The effect is complete. I appreciate all you are doing to help me and others like me get the most out of your awesome themes.
Have and Awesome Day!
Philip
Glad that you managed to solve that!
Thanks!
