[Resolved] Page header custom logo won't show in mobile

[Ivan Cazorla]

Hi there:

I have a bunch of Page headers configured in my site with custom a custom logo (in white) to make a more beautiful header. The things is that in mobile it loads the original logo that i have set in the customizer for the website (which is dark). For all the other pages the black logo is okay but when I’m making a page header with the custom logo in white I would like it to keep that same logo in mobile. Is that possible?

Thanks,
Ivan

[Leo]

Hi there,

Any chance you can link me to the page in question?

[Ivan Cazorla]

For sure! It happens in all the page headers I have configured, but one of them is for example the home page. Link here: https://ivancazorla.com

I had to put a white background so that it mobile you can see the black logo.

In theory the logo should be always white as you can see in desktop and tablet, because I’ve set it up on the page header custom logo.

Thanks,
Ivan

[Leo]

Try disabling the mobile header option:
https://docs.generatepress.com/article/mobile-header/

[Ivan Cazorla]

It works, but… It’s not looking the same as it was. I want the logo to be at the left and the menu toggle at the right, as if I had the mobile header option activated.

Is that possible?

Thanks,
Ivan

[Leo]

Ahh I thought you are using the navigation as header method:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Try that first, then you can use the same thing in page header navigation logo:
https://docs.generatepress.com/article/page-header-logo/#navigation-logo

Then it should work 🙂

[Ivan Cazorla]

Hi there,

It kinda works but I guess it’s not that much intuitive and functional. Also I didn’t wanted to have a sticky header, is it possible to have it as a normal navigation header (no sticky)?

I’d also like to disable the logo change of width animation when it becomes sticky.

thanks,
Ivan

[Leo]

Not sure what you mean? I don’t see the solution being implemented.

It has the exact function of what you have right now but better for your need to use the page header logo.

Sticky navigation isn’t required.

[Ivan Cazorla]

Hi there, I have followed the instructions on the links you gave me and it tells me to activate the sticky + static navigation Logo Position. Then set my sticky navigation transition to none and removed the site header with:

.site-header {
    display: none;
}

After this I can change the navigation logo in the page header, all correct.

But then it doesn’t look like the “old” header I had. The logo makes an animation of growing when scrolling down and the header has lost the width and padding that it had. Upate: okay I understand I don’t need to activate the sticky navigation since I don’t need it.

As it didn’t looked out as I wanted I redo what I did and kept it as before but I’ll do it again so you can see how it looks.

Let me know, link here: https://ivancazorla.com/

I’d like to have a generic header with a grey background for all normal pages like this one (https://ivancazorla.com/test/) and then for individual pages use the page header and make the header transparent but still make it transparent on mobile and with the same custom logo.

Still appears the normal header in mobile version instead of the new one we’ve created using navigation as a header.

thanks,
Ivan

[Leo]

To achieve what you have before, try setting the navigation width to full:
https://docs.generatepress.com/article/navigation-layout/#navigation-width

Increase the navigation height:
https://docs.generatepress.com/article/menu-item-height-width/

Currently I still see the black logo so looks like you haven’t uploaded a white logo as the page header navigation logo:
https://docs.generatepress.com/article/page-header-logo/#navigation-logo

Then you can apply custom navigation colors (transparent) for this page header:
https://docs.generatepress.com/article/merging-the-page-header-site-header/#custom-navigation-colors

For all other pages without this page header, the navigation color can be set in Colors > Primary navigation.

Lastly, you still have mobile header option turned on so it’s still using the mobile header logo:
https://docs.generatepress.com/article/mobile-header/

Please make sure to complete all these steps then it should work 🙂

[Ivan Cazorla]

Alright, thank you for being so clear. Everything works now. 🙂 Really appreciate it.

The only thing that I have now is that in mobile, in the home screen for example (as I am suing a page header) when I click on the menu the header becomes white background instead of keeping it transparent. Is there any way to get rid of that?

Thanks,
Ivan

[Leo]

Hmm try adding this CSS:

@media (max-width: 768px) {
    .generate-merged-header .main-navigation {
        background-color: transparent;
    }
}

[Ivan Cazorla]

Sweet! It works but only on the page header from the home page. Is it possible to activate this in all the page headers?

thanks,
Ivan

[Leo]

Edited the CSS above.

[Ivan Cazorla]

You’re awesome, everything looks perfect!! Thanks so much!

Case resolved. Have a great day 🙂

[Author]

Posts