[Resolved] Header issue on the mobile site

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

The order is now fixed, thanks!

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

[David]

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

hide-on-mobile

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

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

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[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?

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Removed both. Please check now.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts