Header Customization

[Dan1213]

My Store URL : DanLo

I have menus in the header section of my Shopify store, and I want to move these menus slightly upwards without increasing the overall header size. I also want to leave a small gap below the menus and reduce the size of the header below the menus. However, I want these changes to only affect the desktop view, not the mobile view. Could you provide a custom CSS code for this?

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Dan1213 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (min-width: 990px) {
    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: 0 !important;
        margin-bottom: 1.05rem !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Dan1213]

This code works fine. Additionally, I want to reduce the size of header from both sides i.e., above and below as well. Please help me with that as well

[BSS-TekLabs]

Do you want like this? @Dan1213 

[niraj_patel]

Hello @Dan1213 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .header nav.header__inline-menu {
      position: relative;
      top: -10px;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.