Custom HelixUltimate Page Header To Produce Full Screen Image Under Menu Before Scrolling
AJ Cunningham
Is there a custom configuration that can produce a full image/video page with menu overlay before scrolling, then provide a fixed menu header when scrolling down?
Ziaul Kabir
Accepted AnswerHello Cunningham,
Thank you for reaching out to us.
To achieve the functionality you’re describing, here are the steps you can follow:
- Sticky Header:
• Navigate to: System -> Site Template Styles -> Helix Ultimate -> Template Options -> Basic.
• Enable the Sticky Header option. This will ensure that the menu becomes fixed at the top when scrolling.
2. Full-Screen Video or Image Section:
• You can use SP Page Builder to create a full-screen image or video section. Simply add a Row in SP Page Builder, set its height to 100vh (100% of the viewport height), and place your video or image there.
• If needed, you can apply additional styling using Custom CSS to achieve the exact look you want.
3. Custom CSS Guide:
• For detailed instructions on adding custom CSS, refer to our Custom CSS Guide: www.joomshaper.com/documentation/helix-framework/custom-code-css-js-metaIf you require further assistance, feel free to reach out.
Best regards,
AJ Cunningham
Accepted AnswerThanks for the guidance,
The Sticker Header is already enabled, however the header is a bar is a solid colour with the menu contained within.
Inital page view:- https://prnt.sc/i28BOXNHq0On
I would like the inital image display to be in full and cover the entire page until scrolling commences, a transparent header, so the image is displayed in full with menu in front.
Can this be acheived using Page Builder and Template?
Ziaul Kabir
Accepted AnswerHello,
To achieve this, please make your header transparent by setting its background color to transparent. You can do this through the header settings under “Styles” or by using custom CSS.
Next, go to the SP Page Builder page, edit it, and click on the row settings. Follow the settings shown in the screenshots I’ve provided to apply the changes for gettings full screen image or video design.
Thanks!
AJ Cunningham
Accepted AnswerHi Ziaul
Thanks for the feedback however regardless of the CSS adjsutment and the Row Style adjustment, the desired effect is still not achieved. Please see screenshot.
The video covers the full screen except the header menu. I would like the video to display the full height and width, behind the menu options, until the user scrolls. I have this functionality within other templates, however I was trying to acheive it in HelixUltimate too.
AJ Cunningham
Accepted AnswerHi Ziaul
It is well understood that Joomshaper don't provide customisation servics, thank you. I have inspected the CSS of the site and added a custom.css page to the site template, which has allowed me to override the undesired CSS.
The key CSS changes are below, however I do thank you for your help to date.
Call closed.
Ziaul Kabir
Accepted AnswerHi Cunningham,
Thank you for the update, and I’m glad to hear you were able to resolve the issue by adding a custom.css file. It’s great to see you’ve successfully customized the CSS to achieve the desired outcome.
Wishing you all the best with your project!
Kind regards,