[Resolved] Different site header for mobile and desktop with elements

[Kim]

Hi there, I’ve tried to add a different site header for mobile and for desktop for our Woocommerce main shop page. To achieve that I’ve created a header with the class “hide-on-mobile” and another one with the class “hide on desktop”. The first one works fine (not showing up on mobile view). The second one is not displayed (whether on tablet nor on mobile) and “crashes” the whole header on both mobile views.

So I would like to know if it is generally possible to have a different page header for mobile and desktop or if I am doing something wrong?

The site is under development at the moment. If needed I can provide you with some admin credentials.

Many thanks!

[David]

Hi there,

are you using the Header Element ?
You cannot have more then one assigned to the same location. Whichever one you published first will be displayed, subsequent ones will not.

[Kim]

Hi David, many thanks. That made it clear! I will solve it otherwise.

[David]

You’re welcome

[Mira]

Hi there,

I have the same problem like Kim.

Could you tell me, how I can fix this problem? How can I implement two different header for mobile and desktop for the front-page?

[David]

Hi there,

you can’t create multiple Header Elements but you can use the Block Element in GPP 2.0 to create a Page Hero.

https://docs.generatepress.com/article/block-element-page-hero/

This will allow you to add multiple Page Heros or you can create a Desktop Hero and Mobile Hero in the same element.
Simply select the Container Blocks you want to show / hide for different devices and in the Advanced > Additional CSS Class(es) you can use a hide-on-* mobile class:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Mira]

Hi David,

thank you for you answer.

I now got the Plugin “Generate Blocks” and that helped me a lot.

Do you know how I can install GPP 2.0? I have still the version 1.12.2 of GP Premium and I don’t see an option to update the plugin.

[Elvin]

Hi Mira,

Do you know how I can install GPP 2.0? I have still the version 1.12.2 of GP Premium and I don’t see an option to update the plugin.

You can do a manual update by downloading the GPP 2.0.2 file on your Account > Download page.
https://generatepress.com/account

You then upload the plugin similar to uploading any other plugins.
https://wordpress.org/support/article/managing-plugins/#manual-upload-via-wordpress-admin

[Author]

Posts