merged transparent header on mobile

Hi there,

Can you give this CSS a shot? https://generatepress.com/forums/topic/mobile-menu-alignment/#post-260447

Thanks for the quick reply leo! i've already tried this works for making the logo resize but the hamburger icon is still not inline its floated right but not inline with logo still below.tried adjusting padding still will not move up inline. also decreased max-width to 40% still no success

Can you add the code back on so I can see if there is a fix?

Thanks!

ok its up

Perhaps it would be better just to use the mobile header, and make it transparent on mobile?

If you'd like to enable the mobile header and let me know, I can write up a CSS solution for you :)

sure im all for using the mobile header i just need it to be able to switch colors like it currently does on desktop. i was able to get it semi working using

element.style {
}

@media (max-width: 768px){
.fluid-header .inside-header, .header-widget, .site-info {
    display: flex;
}

But still not perfect doesn't work well on tablet and if you rotate phone logo resizes way to big. if we use mobile header will i still be able to enable and disable using page headers if so sure tom if it isn't to much trouble it would be greatly appreciated

Can you turn the mobile header on? Should be pretty simple, something like this:

#mobile-header:not(.is_stuck) {
    background-color: transparent;
}

very simple! but i avoided the mobile header this whole time because i am looking to achieve the logo and menu toggle color swap from grey to blue on scroll is there a way to incorporate this into the css? another thing with that css the menu is transparent and hard to read as well

Ahh so you are looking for swap out the mobile header logo?

Try this snippet:

add_action( 'generate_inside_mobile_header','lh_mobile_header_html' );
function lh_mobile_header_html() { ?>
    <div class="sticky-mobile-header-logo">
        <a href="https://HOME-PAGE-URL">
            <img class="header-image" src="http://mobile-header-sticky-logo-url">
        </a>
    </div>
<?php }

Adding PHP: https://docs.generatepress.com/article/adding-php/
and this CSS:

@media (max-width: 768px) {
    .home .main-navigation.navigation-stick .site-logo {
        display: none;
    }
    .home .main-navigation:not(.navigation-stick) .sticky-mobile-header-logo {
        display: none;
    }
    .home .sticky-mobile-header-logo {
        float: left;
        display: block;
    }
    
}

Thank you both very much with your awesome support i was able to recreate exactly what i needed i did however have to tweak the supplied code but hats off you both for pointing me in the right direction. Only issue now is static logo resizes when rotating phone making it way to big

For PHP

add_action( 'generate_inside_mobile_header','lh_mobile_header_html' );
function lh_mobile_header_html() { ?>
    <div class="static-mobile-header-logo">
        <a href="https://HOME-PAGE-URL">
            <img class="header-image" src="https://image url">
        </a>
    </div>
<?php }

For CSS

#mobile-menu:not(.is_stuck) {
    background-color: #aeaeae;
}
#mobile-header:not(.is_stuck) {
    background-color: transparent;
}

@media (max-width: 768px) {
    .main-navigation.navigation-stick .static-mobile-header-logo {
        display: none;
    }
    .main-navigation:not(.navigation-stick) .site-logo {
        display: none;
    }
   .static-mobile-header-logo{
float:left; 
max-width:40%;
padding-left:8px
    }
.main-navigation:not(.navigation-stick) .menu-toggle{
          color:#fff
}

Let me know if this is acceptable code or if theres a cleaner way to do this.

Instead of max-width: 40%, try using a px number instead of percentage. The screen is wider when it's rotated as landscape which means the logo will increase in size.

perfect where do i add if to make php snippet page specific?

<?php if ( ! is_front_page() ) : ?>
add_action( 'generate_inside_mobile_header','lh_mobile_header_html' );
function lh_mobile_header_html() { ?>
  <div class="static-mobile-header-logo">
        <a href="https://web_url">
            <img class="header-image" src="https://logo_url">}
        </a
    </div>
 <?php } ?>
<?php endif; ?>

tried this but getting fatal error line 9

Like this:

add_action( 'generate_inside_mobile_header','lh_mobile_header_html' );
function lh_mobile_header_html() { ?>
    <?php if ( ! is_front_page() ) : ?>  
        <div class="sticky-mobile-header-logo">
            <a href="https://HOME-PAGE-URL">
                <img class="header-image" src="https://logo_url">
            </a>
        </div>
    <?php endif; ?>
<?php }

when i add the if the logo disappears?

add_action( 'generate_inside_mobile_header','lh_mobile_header_html' );
function lh_mobile_header_html() { ?>
    <?php if ( ! is_front_page() ) : ?>  
        <div class="static-mobile-header-logo">
            <a href="https://HOME-PAGE-URL">
                <img class="header-image" src="https://logo_url">
            </a>
        </div>
    <?php endif; ?>
<?php }

the only change i made is static-mobile-header-logo