Can I do this?

Hi Jose,

This post might help: https://docs.generatepress.com/article/centering-logo-navigation/

Let me know.

Yes! This is just what I needed! Thank you!

You're welcome :)

Hi again!

After put my logo in center of my menu in desktop and tablet version, I want to my logo shows on the top of mobile version (just on of menú mobile icon).

I follow your tutorial of this page (https://docs.generatepress.com/article/mobile-header/), but I don't understand well something...

1. Where I have to add this code?

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>

<?php }

2. In "Your mobile header HTML in here", I should put my logo image, is right?

Hi Jose,

If you are not wanting to add extra element other than the logo icon then you don't need to follow the steps in the second part (https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header) of that page.

Just enable Mobile Header and upload a the logo then you should be good to go.

Let me know if this answers the question.

Hi Leo,

This solutions isn't valid, because logo shows at left of the screen and his size is very, very, very little. I want that logo shows on top of the icon mobile menú and more bigger (at 100% width of the screen).

Thanks!

ahh I see you have a wide logo then mobile header wouldn't work.

Can you try this:
- Disable mobile header
- Add the logo back in Customizer > Site Identity
- Adjust the the CSS here: https://docs.generatepress.com/article/centering-logo-navigation/#hide-your-current-header to this:

@media (min-width: 769px) {
    .site-header {
        display: none;
    }
}

Let me know if this works. If it doesn't can you provide a link to your site?

Hi Leo,

No, this don't work. :(

Site is http://www.revolucionat.com.

Do you need access to Wordpress too?

Thanks!

I edited the code slightly above. Can you try it again? Thanks!

Wait looks like you still have the original code added. Try removing this:

.site-header {
    display: none;
}

As for the logo showing no mobile, I just fixed this in the upcoming version.

For now, you can do this:

@media (max-width: 768px) {
    .main-navigation .main-nav li.hide-on-mobile {
        display: none !important;
    }
}

Now is working! Thank you very much Leo and Tom!

What code edited you? It's for if I want to repeat this in other projects in the future without disturb you.

Thank you!

Glad we could help :)

I've added that code into the core mobile.css file, so you won't have to add it once 1.3.45 is released.