- This topic has 3 replies, 3 voices, and was last updated 5 years, 4 months ago by
.
-
Posts
-
Hi, hope everybody is well and healthy @generatepress!
For the site I am working on I made a split menu as described here https://docs.generatepress.com/article/centering-logo-navigation, and I adjusted it like this https://generatepress.com/forums/topic/split-menu-not-displaying-well-on-mobile/#post-1281271.
Now it works on desktop and phone, but it looks pretty weird on a tablet (horizontal). Moreover, I can’t seem to adjust the font size of the menu for tablet anymore. And finally I would like to know if there is an ideal size for a logo when using it in a split menu, and should I use a different size for the site identity and the mobile header.Sorry for all those questions and thank you in advance!
EvaCustomer Support
Hi there,
try increasing the Mobile Menu Breakpoint 860px in Customizer > Layout > Primary Navigation.
There is no ideal size for a split menu logo.
It really depends on the minimum width the horizontal menu is still displayed – by default that is 768px which doesn’t leave a lot of room when divided up amongst 8 elements.Thank you David, that seems to works fine depending on the browser. For instance, it still looks kind of strange when I use Duckduckgo on a Samsung tablet in horizontal mode. The menu splits up the menu-items in 2 rows and the logo is positioned between those two rows. Maybe I should also change the Navigation Drop Point?
I actually prefer a centered logo with a menu below, because then I know there won’t be any problems. But my client prefers the split menu…
Thanks again,
EvaLead Developer
You could force the navigation to drop down at a specific width like this:
@media (max-width: 920px) { .inside-header { flex-direction: column; } .main-navigation:not(#mobile-header) .site-logo { position: relative; left: unset; transform: unset; display: block; } .main-navigation .menu-item-separator { display: none; } .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul { justify-content: center; } }Let me know if that helps or not 🙂
- You must be logged in to reply to this topic.
