My store header size is too big, I want to reduce it's height

Store Design
, , , ,
1

My header size is too big, I want to reduce it’s height.

And want to make the header logo and menu in one line like: “menu - logo - cart icon”

Preview link: https://grwthshop.nl/

Please help me in this matter

Thank you

2
  1. Go to online store
  2. Click on Edit Code
  3. Open your dt-framework.css file
  4. Paste the below code at the bottom and save

ul.dt-nav > li > a {padding: 0 30px 10px 30px;}

Let me know if you acheived what you need by marking this as a solution.

3

Hello @Fayed

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

div:not(#AccessibleNav) > .logo.text-center { border-bottom: 1px solid var(--DTColor_Border); padding-bottom: 3px !important; margin-bottom: 3px !important; position: absolute !important; right: 35% !important; top: 15px !important; }

techlyser_web_0-1706083842565.png
techlyser_web_0-1706083842565.png1279×302 304 KB

4

Thanks for your response.

It worked for desktop but messed up in mobile view

5

wait

6

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

@media only screen and (max-width: 767px){ header .logo-alignment:not(.secondary-menu-enabled) #AccessibleNav { justify-content: space-between !important; } .logo a img { border: 0; max-width: 88px !important; height: 26px !important; } }

techlyser_web_0-1706085426676.png

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

7

Fayed_0-1706086002282.png
Fayed_0-1706086002282.png363×530 112 KB

My logo here looks too small and doesn’t show the middle line

8

sorry i forgot to add CSS for logo position.

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

@media only screen and (max-width: 767px){ .logo a img { border: 0; max-width: 104px !important; height: 33px !important; } div:not(#AccessibleNav) > .logo.text-center { border-bottom: 1px solid var(--DTColor_Border); padding-bottom: 3px !important; margin-bottom: 3px !important; position: absolute !important; right: 42% !important; top: 6px !important; } }

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

9

Amazing, Now it’s perfect!

Thanks for your help