I have the Foodie theme and am hoping to do a transparent header so it is on top of the video block below. Is this a possibility? I tried making the header transparent in header.liquid but it just made it white as its not overlapping the video block below.
Topic summary
Goal: make the Foodie theme’s header transparent and overlay the hero video rather than pushing content down. Initial attempt in header.liquid only turned it white because the header didn’t overlap the video block.
Proposed fixes:
- Add custom code in theme.liquid (above ) to enable overlap and transparency (exact snippets not visible here). Screenshots provided to show result, indicating success on desktop.
- Add CSS in theme.css to: pull the video up under the header (negative margin), raise header stacking (z-index), and force a transparent header background. Code snippets and screenshots are central to implementation.
Outcome so far:
- Desktop: works as intended with a transparent overlaying header.
- Mobile: header/content disappeared after changes. The requester is fine with keeping mobile non-transparent if needed.
Latest update (mobile-specific fix):
- New CSS targets mobile and desktop separately using media queries. It sets the mobile header to transparent, absolute positioning with higher z-index, and adjusts .videoWrapper margins (0 on mobile, negative on desktop) to control overlap.
Status: pending confirmation. The most recent code aims to restore mobile visibility while keeping desktop transparency; no final resolution reported yet.
Hey @BartTaylor
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Bennettscustomsco.com.au
Hey @BartTaylor
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi there @BartTaylor
Hope you are doing well
Go to Online Store>Themes>Edit Code
Open theme.css
and paste this code to very top
.global__section .background_video__section {
margin-top: -90px !important;
}
.section-header .header-section .no-section-animation {
z-index: 9 !important;
position: relative !important;
}
.section-header__main-bar .main-bar .w100 .devices-hide .js-theme-header .stickynav {
background: transparent !important;
}
similar to below screenshot
Save the file and it will be done.
If you are unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!
Hi @BartTaylor ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Amazing, thank you! The only issue is on mobile nothing shows up now, but on Desktop it is exactly what I was looking for. Any ideas on the mobile version? Even if mobile was just how it was before and not transparent that would be fine if it is possible to separate desktop and mobile views.
**hello @BartTaylor **### change the code for video wrapper###
.mobile-nav__mobile-header {
background-color: transparent!important;
position: absolute!important;
z-index: 9!important;
}
/* For desktop */
@media (min-width: 768px) {
.videoWrapper {
margin-top: -90px !important;
}
}
/* For mobile */
@media (max-width: 767px) {
.videoWrapper {
margin-top: 0 !important;
}
}