How do I add a full-width line below the header on all pages?

[antoinelacour]

Hello!

See above, I would like to add a full width line (see dotted line for reference) below the header on all pages, matching the colour, thickness and opacity of the line below ‘Welcome to our shop’. And the same distance from the logo above, as the line above is to the logo – so the logo and cart icon are centered between the two lines. Currently there seems to be more space below the logo, so this needs to be reduced.

The site is www.plantedjournal.shop

Reference: https://store.emergencemagazine.org/

Any help would be greatly appreciated!

[Made4uo-Ribe]

Hi @antoinelacour

Check this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

sticky-header.header-wrapper.color-background-1.gradient {
    border-bottom: 0.1rem solid rgba(var(--color-foreground),.08) !important;
}

• And save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[antoinelacour]

Thank you @Made4uo-Ribe is it possible to reduce the height below the logo, to be the same distance as the height above the logo? This way the logo and cart icon are in the centre vertically.

[Made4uo-Ribe]

I edit the code. And another code. Check this one.

Same Instruction.

sticky-header.header-wrapper.color-background-1.gradient {
    border-bottom: 0.1rem solid rgba(var(--color-foreground),.08) !important;
}
@media screen and (min-width: 990px){
nav.header__inline-menu {
    display: none;
}
.header {
    padding-bottom: 20px;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!