- This topic has 11 replies, 2 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
October 28, 2019 at 11:46 pm #1047449
Mike 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 #1047668David
StaffCustomer 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2019 at 8:06 am #1047878Mike Simmons
Thanks, 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 #1047905David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2019 at 10:19 am #1048021Mike Simmons
Thanks….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 Simmons
adjusted 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 #1048031David
StaffCustomer SupportSorry my bad – i corrected the CSS https://generatepress.com/forums/topic/mobile-menu-vertical-spacing/#post-1047905
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2019 at 10:42 am #1048032Mike Simmons
found solution in this post
https://generatepress.com/forums/topic/menu-item-width/#post-596935
October 29, 2019 at 10:53 am #1048038Mike Simmons
David, 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 #1048048David
StaffCustomer SupportAwesome – glad to hear you got it working
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2019 at 11:15 am #1048059Mike Simmons
ended 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 #1048303David
StaffCustomer SupportGreat – thanks for sharing
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.