Hi I want to make a header that has rounded corners and looks like it is floating, so the header it self is a solid color and you see the main image of the website behind it where the rounded corners are transparent. An example of this is the store Nestig.
Topic summary
A user seeks to create a floating header with rounded corners and transparent edges, allowing the background image to show through—similar to the Nestig.com store design.
Initial Solution:
- Another user provides CSS code to add to the theme.liquid file after the
<head>tag - The code successfully creates the rounded, floating header effect
Follow-up Issues & Refinements:
- The original poster requests padding adjustments to prevent text from touching the header edges
- They partially resolve padding issues independently but need help matching top and bottom spacing
- Mobile menu display requires fixing, as shown in a screenshot where the dropdown menu appears misaligned
Final Solution Provided:
- Custom CSS code to paste before the
</body>tag in theme.liquid - Includes specific styling for the mobile menu and header spacing
- Important limitation: The solution only applies to the homepage, not other pages
- Screenshots demonstrate the corrected desktop and mobile header appearance
The discussion remains open for confirmation that the final solution resolves all issues.
1 Like
Hi @NihitP
Please, share your store URL. Thanks!
Pass:
bureel
Pass:
bureel
Hi @NihitP
You can do that by adding this code to theme.liquid file after in Sales channels > Online Store > Themes > click “…” > Edit code
That worked, just need some padding to make it fill the screen, also want to fix how it is on mobile, the text is touching the header, want to add padding and have some space, if that makes sense. How would I do that?
Actually I figured that out, I just want the padding from the text to header on top to match the padding from text and bottom, its too short on both pc and mobile
Also i need help to fix the dropdown to menu! Thanks for the help
1 Like
Could you explain a little more about your request?
Hi @NihitP
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if template.name == 'index' %}
{% endif %}
-
And Save.
-
Result:
-
Note: this will only show on the homepage not other pages.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
