- This topic has 5 replies, 2 voices, and was last updated 1 year, 4 months ago by
Leo.
-
AuthorPosts
-
October 1, 2018 at 7:53 am #690782
Ivan
Hello,
How to make a centered logo with hamburger menu (left) and search icon (right) on GP + GPP website for both mobile and desktop.
Something similar to that β https://imgur.com/a/4TPgVOu (desktop) https://imgur.com/a/AwUNjWt (mobile).
Thank you in advance.
Best regards,
VeselaGeneratePress 2.1.4GP Premium 1.7.2October 1, 2018 at 2:56 pm #691073Leo
StaffCustomer SupportHi there,
Good question π I’ve created a solution for you to test. All steps are required.
For desktop:
– Create a new menu with one custom link in it which is your logo image:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-linkUse your home page address for URL and
<img src="URL TO YOUR LOGO" alt="Your site name" title="Your site name" />
for the Navigation Label.Then add
center-logo
in CSS Classes:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classesAssign this menu to the Primary Menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location– Set both navigation widths to Full and alignment to Left:
https://docs.generatepress.com/article/navigation-layout/– Set navigation location to Below header:
https://docs.generatepress.com/article/navigation-location/– Make sure navigation search is activated:
https://docs.generatepress.com/article/navigation-search/– Add the following CSS:
.site-header { display: none; } @media (min-width: 769px) { .main-navigation ul { display: flex; } .main-navigation li.center-logo { order: 2; margin: auto; } li.slideout-toggle { order: 1; float: none; } li.search-item { float: none; z-index: 21; order: 3; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
This should be the final result: https://www.screencast.com/t/Z7GEKOjlZYzZ
For mobile:
– Activate the mobile header and upload a mobile header logo:
https://docs.generatepress.com/article/mobile-header/– Follow the instructions here:
https://docs.generatepress.com/article/centering-logo-mobile-header/Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2018 at 12:53 am #691278Ivan
You rock π
Thank you!October 2, 2018 at 9:08 am #691707Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 31, 2020 at 7:06 am #1600814Deirdre
Hi I have a similar issue and have been trying to fix it – My mobile header looks like this at the moment https://imgur.com/6kPWHcN and I am trying to center the logo. When I use this code from this page https://docs.generatepress.com/article/centering-logo-mobile-header/ the logo is centered and the menu hamburger is moved to the left which is perfect but then the search icon hovers over the middle of the logo like so: https://imgur.com/JjDQlEG
Any idea how to resolve it so that the search symbol stays on the right?
EDIT: Apologies, after searching more I discovered that the snippet below solved the issue, found it in this thread: https://generatepress.com/forums/topic/menu-toggle-logo-search-icon-layout-on-mobile/
.mobile-bar-items {
margin-left: auto;
}December 31, 2020 at 2:01 pm #1601104Leo
StaffCustomer SupportGlad to hear π
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.