Hi, i made a custom transparent header and this is how i’m trying to make my header. https://www.rhodeskin.com/
is there a code for this?
Topic summary
A user is seeking help creating a custom transparent header design for their Shopify store, referencing rhodeskin.com as inspiration. They’ve shared screenshots showing their desired header layout and announcement bar styling.
Current Status:
- The user has already implemented some custom CSS code for the announcement bar and header transparency
- They’ve requested assistance with:
- Achieving the transparent header effect
- Adding specific font styling
- Customizing the announcement bar appearance
Progress:
- A support representative from Ryviu (a product reviews app) offered to provide code assistance
- The user shared their Shopify store URL (14fb05-1b.myshopify.com) to enable direct help
- Updated CSS code was posted, including z-index adjustments, background transparency settings, and margin configurations
Technical Details:
The shared code includes styling for #shopify-section-custom-announcement-bar and .header-wrapper elements, with conditional formatting based on template type.
The discussion remains open, awaiting the promised code solution from the Ryviu representative.
Hi @Breaward
I’m Dan from Ryviu: Product Reviews, Q&A
Could you share your store URL so I can give you the code to do that?
could you also add the font? and I want my announcement like this this is the updated code I used
#shopify-section-custom-announcement-bar { z-index: 9; } #shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message { background: #f2f0eb8c; margin-top: 0 !important; }
{% if template == ‘index’ %}
.videoBackground { margin-top: -37px; }{% else %}
.videoBackground { margin-top: -123px; } .header-wrapper { background: transparent !important; }{% endif %}