Jili fun888 login registration,Www 49 jili com login download no deposit bonus.REGISTER NOW GET FREE 888 PESOS REWARDS!

jamestrueman
(@jamestrueman)

3 years ago

Hi there, I have inserted an image via the Header Media > Header Image option and am using the menu left aligned in a minimal header (as that renders the image best). When the site renders through (some) tablet and (all) mobile device view (i.e., under a certain px query), the image covers the menu option – so I would like to restrict the size of the Header Image under mobile conditions. I have tried using some custom CSS found in response to similar – but not the same topics. Can you assist with a CSS snippet that would ensure the Header / Main Menu is not covered by the Header Image?

I also have a related question here (please tell me to create a separate topic if needed). I am using the Top Bar and have inserted a menu in there with icons (Top Bar menu = Home_bottom). I found that the Mobile Menu would not work unless I had a menu also active in the Header (Header / Main menu = mobile_menu – which is the main reason why it is there). However, when in tablet / mobile view, the site now displays the mobile_menu and the Home_bottom menu? How do I stop this (I’d mainly just want the mobile_menu showing).

Many thanks

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Thread Starter jamestrueman
(@jamestrueman)

3 years ago

Edit: note more than anything – I can use Top Menu to obtain a similar effect as desired – but do not want to stack the menu and image. Minimal delivers an inline layout which is preferred.

Abhishek
(@abhikr781)

3 years ago

Hello,

1. As checked you are using the logo in the header media, so I’m not sure you want to use it as a logo on mobile or as a background image.
In the mobile view, do you want that image as a background image or like a Logo?

2. Actually, usually main menu display in mobile view and it merges the top menu also if it exists.
Please try to create a separate menu for the mobile menu and assign that menu only for mobile, it will work for you.

If you are still facing any issues with it, please share the related snapshots.

Another way is, you can create a custom header, where you can design each header elements according to need for both desktop and mobile.
https://docs.oceanwp.org/article/355-how-to-create-a-custom-header

Thread Starter jamestrueman
(@jamestrueman)

3 years ago

Hi

Thanks very much for your reply

1) apologies, the logo was left in the customizer as I was experimenting with the Top Menu style – but I do not want to use the logo option as I do not want the Top Menu stacked layout (i.e., menu bar above logo). I want to use the Header Image in the Minimal Header style. I have now removed the logo from the customizer. In mobile, I want the image as ‘a logo’, right aligned, but to not cover the menu on the left.

Desktop is OK – https://www.amazon.co.uk/photos/share/m3GhDOo3O7vjAFrpWbamNrIAKiU2U1cOoPLZL4QYETQ

Tablet seems OK –
https://www.amazon.co.uk/photos/share/re8OvhAMesFKohp667vpLndkixn4y8LwxXlOie2ShTs

Mobile image always covers menu –
https://www.amazon.co.uk/photos/share/R4CB6Ol7QoZFKuBcaX84zvhnr0umprgG3ONNdTHk5nH

I would like Mobile to render more like Tablet (not blocking the menu). I was working on the basis that restricting the image size under the right query would resolve that

2) I have been playing around with this and whatever I have done has given me what I need .

Desktop
https://www.amazon.co.uk/photos/share/sOoV9VNs9t9guaYM5SPKzVCwP8HE0BJagRt5jFtdaJJ

Tablet
https://www.amazon.co.uk/photos/share/M1Rt4cHI5LZNhKmvaFCjaWGI8ejtjZfa7fgRwGMVp2y

Mobile
https://www.amazon.co.uk/photos/share/VmrlcEPAD5s18Ezy24VcQznAOnzIr0bN8fsX3er7ibB

Many thanks again,

Thread Starter jamestrueman
(@jamestrueman)

3 years ago

Have created custom header – resolved

Thread Starter jamestrueman
(@jamestrueman)

3 years ago

EDIT: the page builder used to create the custom header is contributing to slow page loads. I would much rather have the option of using the minimal header style with a way to restrict the header media / image size in tablet / mobile. I am sure that would result in far less CSS etc. assets bloating the load cycle? Can you assist please? many thanks

Abhishek
(@abhikr781)

3 years ago

Hello,

There should not be much differences between both. You can use any optimization plugin, that will help with the loading and optimization.

https://www.ads-software.com/plugins/wp-optimize/

https://www.ads-software.com/plugins/autoptimize/

And following the posts will also help you.
https://oceanwp.org/blog/wordpress-performance-tips-everyday-user/
https://oceanwp.org/blog/7-tips-that-will-improve-your-page-performance/

Thread Starter jamestrueman
(@jamestrueman)

3 years ago

Cheers.

I have optimization plugins in place (minify, image optimization) and am using Cloudflare.

Have been trying different layouts to overcome issues Time to page load (and performance in general) is slower than desirable (per performance testing and recommended times) and the header is not loading properly on some older devices (separate ticket).

Was hoping this would be easier to set up than is currently being experienced.

Abhishek
(@abhikr781)

2 years, 11 months ago

Hello,

Unfortunately, no other way except optimization.

And for better performance, you can try also try any cache plugin with CDN.
https://kinsta.com/blog/wordpress-cdn/

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘restrict header media size mobile + mobile menu’ is closed to new replies.

Tags