2 Sticky Headers - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

2 Sticky Headers

Z

Zbigniew Krełowski

Helix Framework 4 years ago

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

Zbigniew

0
9 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #28124

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

0
Z
Zbigniew Krełowski
Accepted Answer
4 years ago #28125

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #28126

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #28127

Here is all about Layout builder of the Helix Ultimate based template:

https://www.joomshaper.com/documentation/helix-framework/helixultimate/layout-builder

0
Z
Zbigniew Krełowski
Accepted Answer
4 years ago #28130

It is not an issue.

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

Zbigniew

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #28133

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.

0
Pavel
Pavel
Accepted Answer
4 years ago #28184

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

0
Z
Zbigniew Krełowski
Accepted Answer
4 years ago #28205

Hi Pavel,

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

Zbigniew

0
Pavel
Pavel
Accepted Answer
4 years ago #28211
0