Header Customization

Store Design
, ,
1

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?

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724859640966.png
BSSTekLabs_0-1724859640966.png1894×320 74.6 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

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 on theme.liquid

.header nav.header__inline-menu { position: relative; top: -10px; }

niraj_patel_0-1724859781703.png
niraj_patel_0-1724859781703.png1350×143 18.1 KB

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

4

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

5

BSSTekLabs_0-1724860900188.png
BSSTekLabs_0-1724860900188.png1896×331 106 KB

Do you want like this? @Dan1213