How can I decrease header padding and change design layout?

Store Design
1

Hello,

I’m tryning to edit the design of my header and can’t find a way to do it properly, maybe someone here can help :slightly_smiling_face:

Firstly, I want to decrease the padding (the white space above and under my header) and make the header less thick. Secondly, as my header is separated in two parts with a separating line, I wonder if it’s possible to make the top part of the header inverted in colors (something like this storefront: www.mathem.se).

Lastly, I cant figure out why my cart button (top right corner) is displaying amount and currency on top of each other instead of next to each other (as 0 kr (0) ).

Hope that wasn’t too many questions in one.

I welcome and appreciate any help, thanks in advance!

My store: gryningens

2

HI @Ivnvu
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.header__top {
padding-inline: 12px!important;
}
.header-container--top{
    --color-background-header: orange;
    --color-text-header: white;
    --color-foreground-header: black;
}
1 Like
3

Hello @Ivnvu

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
4

Thank you, that solved most of it!

However I’m still having issues with the strange layout on the cart button, and the padding between top and bottom header seems off on mobile view.

Also, would it be possible to move the announcement bar below the header?

Thanks again!