[Support request] Show different navigation logo for mobile sticky menu

[Michael]

Hi Support

I need to show a different navigation logo for the sticky menu on mobile. I’ve got the menu to show different logos for the normal nav and the sticky nav on desktop views but this doesn’t work for mobile because there is only one ‘slot’ for the mobile nav logo which displays on both the normal and sticky menus.

Any help appreciated

[David]

Hi there,

you can use the Mobile header – it has its own logo:

https://docs.generatepress.com/article/mobile-header/

[Michael]

Hi David

Thanks for responding. Yes, I’m using the mobile header but the issue is I would like to show a different logo for the standard mobile header to the sticky mobile header because the background colour is different. These screengrabs might explain what I mean:

Mobile header:
https://drive.google.com/file/d/1CE7sKhGPGoC1X2b_8WxAb4R9kkT9F_rk/view

Sticky Mobile header:
https://drive.google.com/file/d/16ekWln4YMgdx440D7JihNMevUSU7mjXl/view

BTW, I tried this hack from Tom, but it didn’t work for me:
https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

Many thanks

[Leo]

We would need some modification from Tom’s code.

Try this snippet:

add_action( 'generate_inside_mobile_header','lh_mobile_logos' );
function lh_mobile_logos() {
?>
    <div class="site-logo mobile-header-logo">
        <img src="URL TO MOBILE HEADER LOGO" alt="" />
    </div>
    <div class="site-logo mobile-header-logo sticky-only">
        <img src="URL TO STICKY MOBILE HEADER LOGO" alt="" />
    </div>
<?php
}

And this CSS:

.mobile-header-logo.sticky-only {
    display: none;
}

.navigation-stick .mobile-header-logo.sticky-only {
    display: block;
}

.navigation-stick .mobile-header-logo:not(.sticky-only) {
    display: none;
}

[Dalia]

Hi, this code works fine, but is it possible to adjust the logo and set the hamburger menu align to the right?
Thanks and best regards,
Dalia

[Leo]

Can you open a new topic and link me to the site in question?

Thanks 🙂

[Author]

Posts