Hello,
How can I have my hero banner part of the header section? So I would like the logo and main menu part of the hero banner. My Hero banner is custom liquid.
Topic summary
A user wants to integrate their hero banner with the header section in Shopify’s Craft theme, positioning the logo and main menu within the banner area.
Proposed Solutions:
-
CSS approach: One responder suggested adding custom CSS code to the
base.cssfile to make the header wrapper transparent and absolutely positioned, but this solution didn’t work for the original poster. -
Theme customization approach: Another responder recommended using Shopify’s theme customizer interface:
- Access the Customize button in Shopify Admin
- Select the banner in the Home Page section
- Use the “Add section” button to drag and drop the logo for customization
Current Status:
The discussion remains open as the user is seeking additional recommendations after the initial CSS solution failed. The effectiveness of the theme customization approach has not yet been confirmed.
Hi @mb206
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.header-wrapper {
position: absolute !important;
width: 100%;
background: transparent !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hi there,
That didnt work unfortunately… any other recommendations?
Thanks in advance!
Hi @mb206 ,
You can try the following steps:
Step 1: Go to Shopify Admin, then click “Customize” button.
Step 2: In Home Page, choose your banner here
Step 3: Use the “Add section” button, then drag and drop to customize your logo.
I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!