- This topic has 28 replies, 3 voices, and was last updated 1 year, 8 months ago by
David.
-
AuthorPosts
-
May 18, 2019 at 5:04 am #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,
HasanMay 18, 2019 at 5:48 am #903447David
StaffCustomer SupportHi 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/May 18, 2019 at 6:18 am #903469Hasan
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?
May 18, 2019 at 6:40 am #903478David
StaffCustomer SupportI 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/May 18, 2019 at 6:55 am #903602Hasan
The order is now fixed, thanks!
I’ve set the mobile padding on the header element as this: http://prntscr.com/nq8cei
May 18, 2019 at 6:59 am #903606David
StaffCustomer SupportHmmm… 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/May 18, 2019 at 7:06 am #903617Hasan
That removed the extra space bellow the mobile header, thanks!
How can I remove the background image completely from the mobile site only?
May 18, 2019 at 7:08 am #903621David
StaffCustomer SupportEdited 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/May 18, 2019 at 7:15 am #903630Hasan
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.
May 18, 2019 at 7:50 am #903650Hasan
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?
May 18, 2019 at 5:59 pm #903971Tom
Lead DeveloperLead DeveloperHi 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-developmentMay 18, 2019 at 11:08 pm #904067Hasan
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,
HasanMay 19, 2019 at 5:44 am #904278David
StaffCustomer SupportCould 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/May 19, 2019 at 7:02 am #904463Hasan
Removed both. Please check now.
May 19, 2019 at 8:17 am #904509David
StaffCustomer SupportI 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/ -
AuthorPosts
- You must be logged in to reply to this topic.