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

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

Home Forums Support Page header custom logo won't show in mobile

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #595447
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #595635
    Leo
    Staff
    Customer Support

    Hi there,

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

    #595795
    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

    #596040
    Leo
    Staff
    Customer Support
    #596126
    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

    #596168
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #596281
    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

    #596292
    Leo
    Staff
    Customer Support

    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.

    #596300
    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

    #596377
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #596795
    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

    #596867
    Leo
    Staff
    Customer Support

    Hmm try adding this CSS:

    @media (max-width: 768px) {
        .generate-merged-header .main-navigation {
            background-color: transparent;
        }
    }
    #596869
    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

    #596874
    Leo
    Staff
    Customer Support
    #596875
    Ivan Cazorla

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

    Case resolved. Have a great day πŸ™‚

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.