- This topic has 28 replies, 3 voices, and was last updated 4 years, 10 months ago by David.
-
AuthorPosts
-
May 18, 2019 at 5:04 am #903421Hasan
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 #903447DavidStaffCustomer 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.
May 18, 2019 at 6:18 am #903469HasanThe 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 #903478DavidStaffCustomer 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
May 18, 2019 at 6:55 am #903602HasanThe 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 #903606DavidStaffCustomer SupportHmmm… thats not working for some reason. Edit the Element and in the Element Classes field add:
hide-on-mobile
May 18, 2019 at 7:06 am #903617HasanThat 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 #903621DavidStaffCustomer SupportEdited the CSS above to remove the background image and add a black background in its place.
May 18, 2019 at 7:15 am #903630HasanMobile 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 #903650HasanDid 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 #903971TomLead 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)'; } );
May 18, 2019 at 11:08 pm #904067HasanHi 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 #904278DavidStaffCustomer 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
May 19, 2019 at 7:02 am #904463HasanRemoved both. Please check now.
May 19, 2019 at 8:17 am #904509DavidStaffCustomer 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.
-
AuthorPosts
- You must be logged in to reply to this topic.