[Resolved] Can I do this?

[Jose Antonio]

Hi!

I want to do a header like appears in this web (with logo in the middle of main menú): http://www.hanakanjaa.com/

Can I do this with Generatepress some way?

Thanks!

GP Premium 1.2.94

[Leo]

Hi Jose,

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

Let me know.

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

[Jose Antonio]

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

[Leo]

You’re welcome 🙂

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

[Jose Antonio]

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() { ?>

Your mobile header HTML in here

<?php }

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

[Leo]

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.

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

[Jose Antonio]

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!

[Leo]

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?

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

[Jose Antonio]

Hi Leo,

No, this don’t work. 🙁

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

Do you need access to WordPress too?

Thanks!

[Leo]

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

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

[Leo]

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

.site-header {
    display: none;
}

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose Antonio]

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!

[Leo]

Glad we could help 🙂

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts