How to make a round header navigation?

[poshpush]

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?

[Moeed]

Hey @poshpush 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
header {
    max-width: 100% !important;
    position: absolute !important;
    width: 100% !important;
    background: #F8EBEB !important;
    border-radius: 100px !important;
    margin-top: 10px !important;
    border: solid 2px black !important;
    display: flex !important;
    justify-content: space-between !important;
}
}
</style>

RESULT:

If I managed to help then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BiDeal-Discount · Accepted solution]

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:

[poshpush]

@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!

[Abdullahi221]

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.

[Jenny6]

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!