Archived topic
Mobile Tablet Menu Header Not Loading
9 replies · Started by Lynn Walford on May 3, 2020
Hello:
I'm almost ready to export settings from wimonews.com to final destination autoconnectedcar.com
The is a problem with the navigation when the nav menu collapsed in tablets and smartphones, all that shows is an X.
https://prnt.sc/sa8hg3
what it looks like before
https://prnt.sc/sa8lyi
After clicking on mobile menu item:
https://prnt.sc/sa8n2i
I re-set up the primary menu in WordPress and it is still not showing:
I also read the documentation to no avail.
1.How do I get the main nav menu to show in the mobile menu?
2. AND what is the preferred size for a small log with text?
Hi there,
1. This should be the issue:
https://docs.generatepress.com/article/off-canvas-panel-overview/#empty-off-canvas-navigation
2. Not sure if I understand. What do you mean by a small log?
1. worked.
2. What is the best pixel size for a small logo next to a font in the header. I tried 28x28 and that scaled up...now I'm trying 72x72 pixels?
Your navigation height is 60px so 72 by 72 should work well :)
The logo seems to be automatically sizing to the font size which is not what I want.
The log I logo is 113 x 113 pixels, and it is smaller than the text the name of the image is staronly.png.
Please give me the exact CSS to size the logo to 72 x 72 pixels.
See:
https://prntscr.com/sachdo
Otherwise the platform has worked well and I am very pleased with how it looks and loads. Thank you.
We can remove the top and bottom padding with this CSS:
.navigation-branding img {
padding: 0;
margin-right: 0;
}
Then the logo would be exactly 60 by 60 which is the menu item height.
Does that work for you?
It's closer---now it's about 45 pixels far from the title---how to I get the title closer to the star?
Edited the CSS here:
https://generatepress.com/forums/topic/mobile-tablet-menu-header-not-loading/#post-1268122
I would recommend including the title in the logo image if you can. It should work better all around.
.navigation-branding img {
padding: 0;
margin-right: 0;
}
Worked the best. Thank you.
No problem :)