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.
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
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,
Have created custom header – resolved
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
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.
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/
