I need help adding lines on top and under header!

Store Design
, , ,
1

hey team! wondering if you can help me achieve this style

castaneadesign_0-1698758614961.png
castaneadesign_0-1698758614961.png1920×346 253 KB

I want to have a line on top of my header and one under, I already have the transparent header and a video banner playing auto in the back and the code edited to transform into solid black when you scroll down, but I can’t find a way to put the 2 lines like in the header finally, could somebody please help me ? kind regards, Chris.

this is how actually looks now

castaneadesign_1-1698758761432.png
castaneadesign_1-1698758761432.png1920×314 109 KB

1 Like
2

Hey @castaneadesign

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

1 Like
3

Hi @castaneadesign

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

4

https://41b5c0-3.myshopify.com/

5

here thanks https://41b5c0-3.myshopify.com/

6

Thanks for the info, but its password protected.

1 Like
7

hi i just removed it, my bad, please check again

1 Like
8

any news ?

9

No, Worries at all. Do you mean add the border on the this side right?

Made4uoRibe_0-1698854197647.png
Made4uoRibe_0-1698854197647.png1360×265 207 KB

If it is, try 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:
header#site-header {
    border-bottom: 1px solid white;
}
  • And Save.

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

10

brilliant !!! legend cheers! ended up using it on custom CSS, didn’t work out on base.css

1 Like
11

Oh, I see you paste it on the theme.liquid? Yes but your base.css have a weird word.

Made4uoRibe_0-1698856252926.png
Made4uoRibe_0-1698856252926.png377×176 4.34 KB

You must delete that word copy or add some comment sign like this // or /* and end */

1 Like
12

wow thanks a lot ! didn’t notice

13

actually i just saw this

castaneadesign_0-1698867327335.png
castaneadesign_0-1698867327335.png1920×243 176 KB

any idea why the line is not full width?

14

Oopsie, You have bigger screen?

It not visible on my screen Im only using laptop. For sure that is the padding.

1 Like
15

yeah, I am using a 27-inch monitor haha! I mainly work on the audiovisual side and now I am trying to learn code but it’s truly hard, I guess for laptop is fine so that should do the trick.