Video Hero above static header using Renew stack

[paulcarpenterfilms]

Hi,
I am using the Renew stack and am trying to achieve a video Hero at the top of the page ABOVE the header menu - exactly as you have in your Ethos #3 demo. In that demo, when you scroll down below the video Hero, the menu header then sticks to the top of the screen from that point.

Can you please advise me which elements or code I need to be using in order to achieve this, assuming it’s possible?

Thanks,
Paul

[christian]

Hey Paul,

If you’re using the Original Header, the way to replicate the Ethos 3 header on any stack is to:

1. Enable the Slider Above Masthead feature. You can learn how the setup works here https://theme.co/docs/page-settings#slider-settings
2. Set the Navbar Postion to Fixed Top in Theme Options > Headers

To learn more about the Original Header, please check the documentation here https://theme.co/docs/header

If you’re using a Pro Header, you need to:

1. Set up 2 bars. The 1st bar will need to have a height of calc(100vh - 80px). 80px is the height of the 2nd bar so you need to change 80px depending on your 2nd bar’s height.
2. Set the 2nd bar to Sticky.

To learn more about the Header Builder of Pro, please check the links below:

• https://theme.co/docs/header-builder-overview
• https://theme.co/docs/how-to-set-up-navigation
• https://www.youtube.com/watch?v=rSw2g3A2KLc&list=PLWPh_GoP7hYUINAmM_xyfBe1_WqLUo6U2

Hope that helps.

[paulcarpenterfilms]

That’s great, thank you Christian.

[marc_a]

Hey @paulcarpenterfilms,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[paulcarpenterfilms]

Hi,
I have another new question on this thread please: I am trying to recreate the down arrow link as used on the video Hero in that Ethos #3 demo, but am having trouble working out how to add a hyperlink to an icon element, which is how I assume it was achieved in the demo?

I have tried implementing the icon as a Classic Feature Box, following your instructions in this article: Add Links to Feature Boxes | Themeco Docs - but that hasn’t worked in my case for some reason. The JS code doesn’t seem to have done anything.

Can you point me in the right direction with this please?

Thanks again.

[tristup]

Hi @paulcarpenterfilms,

There is no option to add any link to the Icon element. But you can add the Icon element inside a DIV element and choose the a as HTML tag for the DIV element and set the URL to the LINK attribute as described in the given screenshots.

Hope it helps.
Thanks

[paulcarpenterfilms]

Thanks @tristup, that was really clear and helpful.

Paul

[tristup]

Hi Paul,

Glad that we are able to help you.

Thanks