Different Mobile Header Logos

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?

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

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.

Any chance you can link us to your site?

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?.

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 :)

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.

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!