[Resolved] Having different header on desktop and mobile

[Kay Morton]

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

[David]

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?

[Kay Morton]

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!

[David]

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.

[Kay Morton]

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

[David]

Glad to hear that!

[Author]

Posts