2 sticky headers - Forum | JoomShaper
Awaiting an answer Helix Framework

2 sticky headers

Asked by Zbigniew Krełowski 5 years ago Last activity 5 years ago

Hi,
is it possible to set up 2 sticky headers - one for desktop adnd secon to mobile version?

Zbigniew

9 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

Hi there!

Thanks for your query.

Yes, I think it's possible...

Here is how to create custom header:

https://www.youtube.com/watch?v=bYPgWAWzXpM

You need two different header and then you can choose from the settings the visibility of them.

Let me know if you want any more info about it:)

Best Regards

Zbigniew Krełowski Asked this
5 years ago

Nice answer ;)
But how to set up it?
Zbigniew

Rashida Rahman Staff
5 years ago

Here is how to create custom header:

https://www.youtube.com/watch?v=bYPgWAWzXpM

You need two different header and then you can choose from the settings the visibility of them.

Let me know if you want any more info about it:)

Best Regards

Zbigniew Krełowski Asked this
5 years ago

It is not an issue.

I want to create 2 sticky headers - one visible only for dektop, second - visible only on mobliles.

Zbigniew

Rashida Rahman Staff
5 years ago

Yes, that is why I have given you the tutorial, as you need to create two custom headers to achieve this instead of the default header!

And there are row options you can have from the layout builder where you can set up if you want to hide the row for certain devices. And the options are described in the documentation that I shared the link to it with you already.

If it is not clearer enough, then please let me know which template you are using? I will try to share a screencast to illustrate the whole procedure for your ease.

Pavel
5 years ago · edited

Yes, that is why I have given you the tutorial, as you need to create two custom headers to achieve this instead of the default header!

And there are row options you can have from the layout builder where you can set up if you want to hide the row for certain devices. And the options are described in the documentation that I shared the link to it with you already.

Hi Rashida. I think you gave the wrong answer. Creating two headers will lead to duplication IDs that is invalid and lead to conflicts. The "Hide on device" option does not protect from it.

Hi Zbigniew. If you need a different appearance of the Header for different devices, the only way to do this, stylized through CSS using Media Queries

Zbigniew Krełowski Asked this
5 years ago

Hi Pavel,

can you write down a few word more about Media Queries?

Zbigniew

Log in to reply.