Adding Divider Line in Brooklyn Theme

Solved
Highlighted
Excursionist
28 0 7

Hey guys! I was able to remove the unwanted lines underneath my headings and remove spacing between my sections but now I'm having trouble adding the divider lines that I do want.

Is anyone able to help me add a divider line below the header and above the footer? I want to separate them from the rest of the page.

I want to add a white divider line here.
Capture.PNG

I want to add a black divider line here.

Capture.PNG

 

Thank you in advance!

1 Like
Highlighted
Shopify Partner
6134 896 2071

Hello, @kimbermiller 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
28 0 7

Thank you! It's www.shoplilyrose.co and the password is kna.

1 Like
Highlighted

This is an accepted solution.

Hi KimberMiller,

To achieve this

red-blu.jpg

 

Then add the following code to the end of the theme.scss.liquid file

/* divider line below header */
.header-wrapper--transparent .site-header {
    border-bottom: 5px solid red; }

/* divider line above footer */
#shopify-section-footer { 
    border-top: solid 5px blue; }

Now obviously change the 5px to any whole positive number for the line thickness you want

Also change the red blue color to what you like too, or use the #ffffff  for white and #000000 for black

Awesome !

:)

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
1 Like
Highlighted
Shopify Partner
6134 896 2071

This is an accepted solution.

Hello, @kimbermiller 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.header-sticky.header-wrapper {
border-bottom: 2px solid #000000;
}
#PageContainer hr.hr--large {
    width: 100%;
    border-color: #ff0000;
}

change  the color value as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
28 0 7

Is there a way to make the top line mobile only? It looks a little silly on my desktop but perfect on mobile.

0 Likes
Highlighted

This is an accepted solution.

 @media screen and (max-width: 768px) {
/* divider line below header */ .header-wrapper--transparent .site-header { border-bottom: 5px solid red; }
}

This is the code for the top line line only ( under the header )

adjust the 5px for the thickness ( 1px 2px 3px etc )

adjust the red for what ever color you want ( white black OR #ffffff #000000  etc)

Your theme changes to mobile view ( hamburger menu at 768px ), so thats what that number is, adjust slightly if needed

This code replce the previous code above totally.

:)

Dan 'the web man' from DownUnder | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email:
0 Likes