- This topic has 11 replies, 2 voices, and was last updated 6 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 8, 2020 at 1:56 am #1356123
ZUN MIN
Hi.
How do I implement mobile menu style such as Awaken theme or Artisan theme? which they appear on the left or right side rather then drop down.
Also how do I put logo on the top left side and menu on the top right on mobile view such as those theme Aspire or Vibe?
I am using Zeal theme which is logo in the center and menu under the logo.
July 8, 2020 at 4:49 am #1356309David
StaffCustomer SupportHi there,
1. Thats the Off Canvas Panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/
Please make sure you assign a Menu to it like you do the Primary or Secondary Navigation.
2. Enable the Mobile Header:
https://docs.generatepress.com/article/mobile-header/
Note: The mobile header has its own Logo.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2020 at 3:49 am #1357662ZUN MIN
Hi.
Thanks for the reply.
All good, but when I apply mobile header with logo, logo position is a bit high, not in the center of the menu, not alight with menu. how can I fix?
When I use them with site title it is aligned with menu. but when I use logo it is not right position.
It’s a bit upper and middle. please have a look.
Thank you.
Regards,
Zun Min Lee
July 9, 2020 at 4:39 am #1357726David
StaffCustomer SupportCan you remove the following CSS in Customizer > Additional CSS:
/* Mobile Navigation Breakpoint */ @media (max-width: 922px) { .site-logo { width: 140px; margin: 0 auto 32px auto!important; display: block; } #menu-main-navigation li { border-bottom: 1px solid rgba(255,255,255,0.2); } .main-navigation .main-nav ul li a { line-height: 50px; } .main-navigation .menu-toggle { display: block; } .main-navigation ul { display: none; } .main-navigation.toggled .main-nav > ul { display: block; } .main-navigation .main-nav ul ul.toggled-on, .secondary-navigation .main-nav ul ul.toggled-on { position: relative; top: 0; left: auto !important; right: auto !important; width: 100%; pointer-events: auto; height: auto; opacity: 1; display: block; } .main-navigation .main-nav li { float: none; clear: both; display: block !important; text-align: left !important; } .main-navigation .main-nav li.hide-on-mobile { display: none !important; } .main-navigation .dropdown-menu-toggle:before { content: "\f107" !important; } .main-navigation .sfHover > a .dropdown-menu-toggle:before { content: "\f106" !important; } .main-navigation .menu-item-has-children .dropdown-menu-toggle { float: right; } .main-navigation .mobile-bar-items { display: block; } .main-navigation .menu li.search-item { display: none !important; } .main-navigation .sf-menu > li.menu-item-float-right { float: none !important; display: inline-block !important; } [class*="nav-float-"] .site-header .inside-header > * { float: none; clear: both; } .gen-sidebar-nav { display: none; } .sidebar-nav-mobile:not(#sticky-placeholder) { display: block; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2020 at 4:57 am #1357755ZUN MIN
Hi,
That works perfect? why there were such CSS, because it was made for ZEAL theme?
I have one more question, How can I show little bigger for my logo on desktop view? it doesn’t seem to be full height on the header. is that possible to make full size height on the black header area?
Thanks for the help!Regards,
Zun Min Lee
July 9, 2020 at 5:24 am #1357787David
StaffCustomer SupportYeah – Zeal was built a long time before some of the mobile breakpoint features were introduced. We need the designer to update it really or we’ll replace it.
Logo size can be controlled in Customizer > Site Identity –> Logo Width
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2020 at 5:35 am #1357802ZUN MIN
Hi,
Thanks for the reply.
I increased logo size maximum, but it doesn’t seem to be big enough. there are lots of black spacing on the top and bottom.
I want to make logo bigger something like this
https://gpsites.co/finance/Can I make it bigger in the current size of header?
Thank you!
Regards,
Zun Min Lee
July 9, 2020 at 5:48 am #1357813David
StaffCustomer SupportAah more CSS in Customizer > Additional CSS that needs deleting:
.site-logo { width: 100px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2020 at 6:03 am #1357822ZUN MIN
Hi,
Thanks for the reply. I increased logo, but header size getting too big.I think logo size doesn’t matter I want to make less margin on header for top and bottom, so I can make logo bigger on same header size.
is that possible?
Thank you!
Regards,
Zun Min Lee
July 9, 2020 at 6:58 am #1357884David
StaffCustomer SupportYou can reduce the Padding in Customizer > Layout > Header:
https://docs.generatepress.com/article/header-layout-overview/
This will reduce the space around the logo and the nav. Then you can increase the logo size if you wish.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 9, 2020 at 7:05 am #1357891ZUN MIN
Hi,
Thanks for the reply.
That works perfect.
Thank you!!!
Regards,
Zun Min Lee
July 9, 2020 at 7:26 am #1357903David
StaffCustomer SupportGlad to be of help
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.