Add border to top and bottom of navigation supply theme

[makingwaveskzoo]

I am trying to add a divider between the navigation bar and first featured section just like between other sections. Site is makingwaveskzoo.com - thanks!!!

[Ahsan_ANC]

Hi, @makingwaveskzoo

You can try this code

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

#shopify-section-collection-row-1 {
    border-top: 1px solid #ccb52f;
    padding-top: 30px;
}

or### you can do this.

[DavidEKim]

Hi,

I’m not sure where you want to add the border.

To add borders, please add the code below to Assets/theme.css file.

.nav-bar {
  border-top: 1px solid #ccb52f;
  border-bottom: 1px solid #ccb52f;
}

If you want to make it thicker, please change the 1px to bigger numbers (2px, 3xp, 4px and so on).

If you want to change the border color, please change the hex code (#ccb52f) above to your needs.

The above code will make the navigation bar as below.

To add a border above the first section, please add the code below to Assets/theme.css file.

#shopify-section-collection-row-1 {
    border-top: 1px solid #ccb52f;
    padding-top: 30px;
}

The above code will make it as below.

Hope it helps.

Thanks.

[Kani]

It’s just be hide by css code. edit it on ‘theme.scss.css’

/* before*/
.template-index main.main-content .shopify-section:nth-child(1) hr:first-child {
  display:none;
}

/* after */
.template-index main.main-content .shopify-section:nth-child(1) hr:first-child {
  /* display:none; */
}

[KetanKumar]

@makingwaveskzoo

oh try this code

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

nav#navBar {
    border-bottom: 1px solid rgba(91,78,31,.2);
    border-top: 1px solid rgba(91,78,31,.2);
}

[makingwaveskzoo]

Thanks, its perfect!

[KetanKumar]

@makingwaveskzoo

Thanks, its our pleasure to help us