Reduce vertical padding in header

English Shopify Shopify Design
, ,
1

Hello, here’s my website : www.lothaire.fr

I’m using the Impulse theme and I want my header to look more like Apple’s.

For this, I want to accomplish two things :

  1. Reduce the vertical padding at the top and the bottom of the header. There’s too much whitespace for my taste.
  2. I never ever want for Navigation items, on desktop, to appear on two lines. As soon as the items can’t live confortably in the menu bar, it should switch to the mobile bar with a hamburger button.

Could you please help ?

1 Like
2

Hi @LothaireBordeau

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (min-width: 769px) {
    .site-header {
        padding: 10px 0;
    }
    div#HeaderWrapper {
    height: 50px;
}
}
3

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 769px) {
    .site-header {
        padding: 10px 0 !important;
    }
#StickyHeaderWrap {
    height: 64px !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719415300200.png
BSSTekLabs_0-1719415300200.png1883×863 374 KB

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

Hi @LothaireBordeau

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

header#SiteHeader {

padding: 0 !important;

}

div#StickyHeaderWrap {

height: 50% !important;

}

Also, I noticed that the on footer has a lot of space on the right side. I think you should add menus, contact forms, or socal icons so users can more easily find your store.

PageFlyHenry_0-1719416149048.png
PageFlyHenry_0-1719416149048.png1919×842 34.3 KB

Hope that my solution works for you.

Best regards,

Henry | PageFly