Header Customization

Store Design
, ,

Topic summary

Header menu positioning and header height adjustments for a Shopify store’s desktop view.

  • Request: Move the header’s inline menu slightly upward, keep a small gap below it, and reduce the header space beneath the menus, without affecting mobile.

  • Solutions provided:

    • Steps to edit theme.liquid with screenshots illustrating the expected visual result; instructions mention adding code before the closing head tag (code content not shown in the post). Images are central to visualizing the outcome.
    • A CSS snippet to shift the menu upward: .header nav.header__inline-menu { position: relative; top: -10px; }. Instructions to paste it before in theme.liquid. This moves the menu up by 10px via relative positioning.

  • Outcome so far: The provided CSS successfully moved the menu upward for the requester.

  • Latest development: The requester asked to further reduce header size from both the top and bottom. A follow-up post shows an example image asking if that visual matches the request.

  • Status: Ongoing. Pending a desktop-only CSS solution to adjust header height above and below while preserving mobile layout.

Summarized with AI on December 20. AI used: gpt-5.
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 Likes
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.
1 Like
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

1 Like
5

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

Do you want like this? @Dan1213