Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] merged transparent header on mobile

Home Forums Support merged transparent header on mobile

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #408446
    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.

    GP Premium 1.4.3
    #408536
    Leo
    Staff
    Customer Support
    #408554
    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

    #408637
    Leo
    Staff
    Customer Support

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

    Thanks!

    #408675
    David

    ok its up

    #408770
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #408790
    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

    #408801
    Tom
    Lead Developer
    Lead Developer

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

    #mobile-header:not(.is_stuck) {
        background-color: transparent;
    }
    #408808
    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

    #408843
    Leo
    Staff
    Customer Support

    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;
        }
        
    }
    #409060
    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.

    #409204
    Leo
    Staff
    Customer Support

    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.

    #409507
    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

    #409593
    Leo
    Staff
    Customer Support

    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 }
    #409851
    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

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