[Resolved] Centered logo with hamburger menu (left) and search icon (right)

[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,
Vesela

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

Hi 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-link

Use 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-classes

Assign 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/

[Ivan]

You rock 🙂
Thank you!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Deirdre]

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;
}

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts