Archived topic

Having different header on desktop and mobile

5 replies · Started by Kay Morton on October 27, 2020

Viewing posts 1–6 of 6

October 27, 2020 at 10:30 pm #1507223

I have added a slider to the site header, using wp_head in Elements, which is working fine.
I want to have a different header displayed on mobile, where an image displays above the Menu and Cart. Currently the image is displaying next to the Menu and Cart, but I want the image to be bigger.

How can I do this, please?
Thanks
Kay

October 28, 2020 at 1:41 am #1507335

Hi there,

Adding content to the WP_head hook is not recommended - it should be kept for code and meta links - change the Hook to generate_before_header - it will display in the same place.

Can you provide a link to your site so i can see the issue on mobile?

October 28, 2020 at 3:11 am #1507433

Thanks David. I will change the hook.

The site is at lonestarcreek.com.au

Here is what I would like the mobile header to look like https://lonestarcreek.com.au/mobile-header/.

So, with the drawing and the logo above the Menu and Cart... (I will join the drawing and logo together before I upload the image.)

Thanks!

October 28, 2020 at 6:58 am #1507702

Hmmm... try:

1. Customizer > Layout > Header - disable the Mobile header
2. Edit the Header Element and set the Merge with Content for Desktop only.

Then let us know so i can take a look at any CSS requirements.

October 28, 2020 at 7:28 pm #1508711

Thanks David.
I have created another hook, with the image displaying just on mobile. It took a few tries, but it seems to work!
Appreciate your assistance!!!
Cheers
Kay

October 29, 2020 at 2:22 am #1508917

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.