[Resolved] Different Mobile Header Logos

Home Forums Support Different Mobile Header Logos

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #581007
    Andy

    Hi,
    I’m currently building a site using the Page Header and the Merge with site header option. All my pages will have a full-width image behind the logo and navigation. Now, using the advanced options in the Page Header builder allows me to change the logo and navigation colors based on what works best with the image displayed behind it.
    e.g) Darker logo/menu for photos with a lighter area at the top and Lighter logo/menu with photos that have a darker top area.

    I’m also using the mobile header option as I like how it floats the hamburger toggle to the right of the logo.
    My problem is the mobile header doesn’t allow you to specify a different logo on different pages like the Page Header builder does.

    Is my only option to disable the mobile header and try to customize the standard header so the logo is floated to the left and the toggle menu to the right with CSS?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #581018
    David
    Staff
    Customer Support

    Hi Andy, yes currently you would need to remove the mobile header. Have you thought about adding the logo to the navigation bar instead of the site identity. This should then give you what you need?

    #581045
    Leo
    Staff
    Customer Support
    #581047
    Andy

    Hi,

    Hi Andy, yes currently you would need to remove the mobile header. Have you thought about adding the logo to the navigation bar instead of the site identity. This should then give you what you need?

    I can’t quite picture in my head how that would work. For both desktop and mobile views I’d need the logo on the left and the nav on the right and I’m using the slide-out nav for mobile view.

    You can also try this filter: https://docs.generatepress.com/article/generate_mobile_header_logo/

    Thanks Leo, that looks promising but this a blog style site so each post may need a different logo depending on header image so I guess I’d have to keep adding Post IDs to the IF statement which could get a bit messy.

    #581093
    Leo
    Staff
    Customer Support

    Any chance you can link us to your site?

    #581130
    Andy

    I’ve edited my original post with the URL. Front-end password is now: gpaccess18

    The site is still early in development but have the header area mostly done. If you look at the home page and then the about page you’ll see they have different logos and coloured navigations based on the photos used. The photos aren’t necessarily the final ones to be used but they cover the 2 different types of photos that I’m likely to use, i.e light or dark top section.
    The issue is EVERY new post will also have a header area like this with a different photo, so how best to change this in mobile view?.

    #581171
    Leo
    Staff
    Customer Support

    Hmm that case I think David’s suggestion should work.

    So basically use this method here: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
    Then disable mobile header so that the page header logo should show up on mobile as well.

    Give it a shot let us know 🙂

    #581213
    Andy

    Thank you guys I have this working now. I had to add a little bit of extra CSS to make things look right, as using the logo in navigation setting removes all the padding and resizes the logo:

    .inside-navigation { padding: 15px; }
    
    @media (min-width: 769px) {
      	.main-navigation .navigation-logo img { height: auto; padding: 0; }
    }
    
    @media (max-width: 480px) {
      
    .menu-toggle { padding-left:0; padding-right: 10px; }
    
    .inside-navigation { padding: 5px; }	
    }

    I know you can’t really help me with design but I’d appreciate any feedback. Do you think it looks odd having different versions of logos on different pages/posts or does it work ok?.
    I spent quite some time designing the coloured orange/blue logo so wanted to use it, unfortunately it doesn’t display too well on dark areas of a photo hence why I created the white version.
    I suppose I could just make sure I always have a photo with some sky/lighter upper area, but I thought if I could make the logo work with any type of photo that would be best.

    Thanks again for the help.

    #581314
    Leo
    Staff
    Customer Support

    It’s really personal preference I guess.

    I’ve seen people using 2 logos but don’t think I’ve seen more than 2.

    Don’t see why not either though as long as you like it 🙂

    Glad we could help!

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