- This topic has 11 replies, 2 voices, and was last updated 4 years, 5 months ago by David.
-
AuthorPosts
-
October 28, 2019 at 11:46 pm #1047449Mike Simmons
Hi, I’ve used customizer to adjust menu item height to make the logo the size I want, but that makes the vertical space between items much too much ….so, if you could kindly suggest css π thanks!
October 29, 2019 at 6:25 am #1047668DavidStaffCustomer SupportHi there,
try this CSS where you can set the height of the logo and then adjust the menu item height in the Customizer:
@media (min-width: 769px) { .navigation-branding img { height: 150px !important; } .main-navigation .inside-navigation { align-items: center; } }
October 29, 2019 at 8:06 am #1047878Mike SimmonsThanks, that centered menu and made logo stay same size when adjusting menu line height….BUT,
now in tablet & mobile view logo becomes very small, and in mobile view, when I click on menu hamburger there seems to be no menu, just the X πOctober 29, 2019 at 8:29 am #1047905DavidStaffCustomer SupportYou have the Mobile Header enabled so this falls back to the Primary Navigation > Menu Height which you can set separately for Mobile by clicking the mobile icon. Or you can use this CSS to change the logo size:
.site-logo.mobile-header-logo, .site-logo.mobile-header-logo img { height: 80px; }
Second issue – you have enabled the Off Canvas Panel which like the Primary or Secondary Nav is a menu location. So edit the Menu you want to display and check Off Canvas Panel in the locations.
October 29, 2019 at 10:19 am #1048021Mike SimmonsThanks….what I want is the logo to show on tablet and mobile, but mobile items to close together.
With mobile header on, the CSS ^^ didn’t seem to help – only way I can get mobile menu without a lot of whitespace is to adjust menu height in customizer, but that makes logo tiny (yes, clicked on mobile when adjusting…
Turning mobile header on or off doesn’t seem to affect anything that I can tell.
Right now everything seems good except for vertical spacing of mobile menu….using menu height makes logo too small, but mentioned that ha ha….thanks!
October 29, 2019 at 10:25 am #1048026Mike Simmonsadjusted vertical spacing to what I want for mobile menu, now just need logo bigger on table and mobile. thanks!
October 29, 2019 at 10:37 am #1048031DavidStaffCustomer SupportSorry my bad – i corrected the CSS https://generatepress.com/forums/topic/mobile-menu-vertical-spacing/#post-1047905
October 29, 2019 at 10:42 am #1048032Mike Simmonsfound solution in this post
https://generatepress.com/forums/topic/menu-item-width/#post-596935
October 29, 2019 at 10:53 am #1048038Mike SimmonsDavid, actually had to use your CSS (along with CSS here
https://generatepress.com/forums/topic/menu-item-width/#post-596935otherwise mobile header is not tall enough….team effort, thanks!! π
October 29, 2019 at 11:03 am #1048048DavidStaffCustomer SupportAwesome – glad to hear you got it working
October 29, 2019 at 11:15 am #1048059Mike Simmonsended up taking out first CSS snippets you gave so can control size of desktop logo
here’s final CSS
@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 98px;
}
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 88px;
}
}.site-logo.mobile-header-logo,
.site-logo.mobile-header-logo img {
height: 98px;
}October 29, 2019 at 4:43 pm #1048303DavidStaffCustomer SupportGreat – thanks for sharing
-
AuthorPosts
- You must be logged in to reply to this topic.