Hello, I’d like to make my header round as shown below. I’ve tried many different ways in the discussion, but it didn’t work. How can I create a rounded background and place the logo on the left, with the menu on the right? Or just the header background round?
Topic summary
A user seeks to create a rounded header navigation with the logo on the left and menu on the right, sharing a reference screenshot of the desired design.
Solutions Provided:
- One contributor suggested adding custom markup code to the theme.liquid file above the
</body>tag - Another provided CSS code targeting the header section with
border-radius: 50pxand a 2px black border, which successfully achieved the rounded appearance
Current Issue:
The user confirmed the CSS solution works on desktop but identified two problems:
- The fixed header overlaps page content when scrolling—they want it to hide on scroll down and reappear on scroll up
- The styling only applies to desktop view; mobile compatibility remains uncertain
The discussion remains open with the user requesting guidance on modifying the CSS to implement scroll-based visibility behavior and clarification on mobile responsiveness.
1 Like
Hey @poshpush
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 then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @poshpush
let try to add this custom CSS code:
@media screen and (min-width: 990px) {
body #shopify-section-sections--24669162996031__header {
border: 0 !important;
background: transparent;
padding-inline: 20px;
position: fixed;
top: 20px;
width: 100%;
}
body #shopify-section-sections--24669162996031__header sticky-header {
border-radius: 50px;
border: solid 2px #000000;
}
sticky-header header.header:not(.drawer-menu).page-width {
max-width: 100%;
grid-template-columns: auto 1fr;
}
}
the result:
We have been working with many brands to run online stores. After viewing your website, I believe our expertise could add value to your business.
First off, I would suggest adding a hero section at the top of your homepage.
Hi @poshpush
Can you please share the store URL here at first? I’m happy to further check and customize one CSS for you to make it round like what you shared in the screenshot. Thank you!
@BiDeal-Discount Hello, I tried with your code, and it works as I wanted, but there’s one issue!
The header is fixed when I scroll the page, which blocks the content. I want it to be hidden when scrolling through content. In what CSS do I need to fix to make it invisible when scrolling and reappears when scrolling up? Here’s the result: https://www.poshpush.me/
and another question is, is it also look the same in mobile? right now it seems like it only works in PC, but I’m wondering if same thing can apply for mobile too! Thank you in advance!
We have been working with many brands to run online stores. After viewing your website, I believe our expertise could add value to your business.