[Resolved] merged transparent header on mobile

[David]

Im using a merged transparent header on only home page with nav backround and logo color change on scroll. how can i use same on mobile? if i enable mobile header, transparency before scroll goes away. if i disable mobile header, transparency works but logo and hamburger icon are not inlined logo is centered above menu hamburger. is there a way to inline these or make mobile header transparent before scroll? ive searched the forums and tried a few suggestions with no success.

[Leo]

Hi there,

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

[David]

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

[Leo]

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

Thanks!

[David]

ok its up

[Tom]

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 🙂

[David]

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

[Tom]

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

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

[David]

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

[Leo]

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;
    }
    
}

[David]

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.

[Leo]

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.

[David]

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

[Leo]

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 }

[David]

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

[Author]

Posts