[Resolved] Header issue on the mobile site

Home Forums Support [Resolved] Header issue on the mobile site

Home Forums Support Header issue on the mobile site

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #903421
    Hasan

    I’ve set-up the header for the entire site with Element, which looks great for the desktop site, but messed up completely on the mobile site.

    1. I need to show the background image on the mobile site correctly.
    2. The logo and the site title should come first, then come the header widgets (search + custom html).
    3. Need to remove the extra space after the header on the mobile site.

    Best regards,
    Hasan

    #903447
    David
    Staff
    Customer Support

    Hi there,

    this CSS will re-order the header for mobile:

    @media (max-width: 768px) {
        .inside-header {
            display: flex;
            flex-direction: column-reverse;
        }
        .site-branding {
            order: 10;
        }
        .site-header {
            background-image: none;
            background-color: #000000;
        }
    }

    In the Header Element – select the Mobile Padding and set it to 0. This will hide it on mobile.

    #903469
    Hasan

    The logo went on top now, thanks!

    The site tagline has now gone bellow the title, which should be before the logo same as the desktop site.

    Also there is some additional space remaining after the logo and the background image is repeating, which it should not. I’ve already set the mobile padding for all side to zero from the header element.

    Any idea?

    #903478
    David
    Staff
    Customer Support

    I edited the CSS here to fix the site branding order.

    I am still seeing your Header Element being displayed below the Site Header did you reduce the padding for mobile as mentioned above

    #903602
    Hasan

    The order is now fixed, thanks!

    I’ve set the mobile padding on the header element as this: http://prntscr.com/nq8cei

    #903606
    David
    Staff
    Customer Support

    Hmmm… thats not working for some reason. Edit the Element and in the Element Classes field add:

    hide-on-mobile

    #903617
    Hasan

    That removed the extra space bellow the mobile header, thanks!

    How can I remove the background image completely from the mobile site only?

    #903621
    David
    Staff
    Customer Support

    Edited the CSS above to remove the background image and add a black background in its place.

    #903630
    Hasan

    Mobile header is now fixed, thanks a lot!

    It seems like tablet view of the header is still messed up. Please check the iPad & Kindle Fire HDX view.

    #903650
    Hasan

    Did some guesswork and added hide-on-mobile hide-on-tablet in the Element Classes field, which removed the extra space bellow the header on the iPad view.

    The Kindle Fire HDX view is still messed us. How can I fix that?

    #903971
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Would you want to disable the transparent header at a higher breakpoint? That would prevent a lot of the overlap.

    add_filter( 'generate_not_mobile_media_query', function() {
        return '(min-width: 1000px)';
    } );
    #904067
    Hasan

    Hi Tom,

    Thanks for your attention!

    Can you please explain what this code will do? I’ve added it on the functions.php of the child theme, but can’t find much improvements.

    Please check these views:

    Kindle Fire HDX portrait mode: http://prntscr.com/nqga1b (logo is showing twice – everything else is fine on the header)

    Kindle Fire HDX landscape mode: http://prntscr.com/nqgaak (header is not expanding enough to accommodate the search bar on the header widget)

    iPad landscape mode: http://prntscr.com/nqgam1 (same issue – header is not expanding enough to accommodate the search bar on the header widget)

    Best regards,
    Hasan

    #904278
    David
    Staff
    Customer Support

    Could you remove the code that Tom provided and the hide-on-tablet class so i can take a look at a different approach. As i think we may be adding fixes to make other fixes work. Let me know

    #904463
    Hasan

    Removed both. Please check now.

    #904509
    David
    Staff
    Customer Support

    I think we need to rethink this and remove the header element and use some custom CSS. The problem is when merging with the Site Header it becomes absolutely positioned which means the header element no longer responds to its size, hence the overflow.

    So could you disable the Header Element (Quick Edit > Save as Draft) and then in Customizer > Layout > Header and set the top padding to 100px. Then ill provide some CSS to do the rest.

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