Add border to top and bottom of navigation supply theme

Store Design
1

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!!!

1 Like
2

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;
}

download (3).png
download (3).png1869×823 124 KB

or### you can do this.

Screenshot 2022-07-31 111857.png
Screenshot 2022-07-31 111857.png1459×415 23.7 KB

1 Like
3

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.

20220731_151331.png
20220731_151331.png1575×347 33.2 KB

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.

20220731_152232.png
20220731_152232.png1436×475 41.7 KB

Hope it helps.

Thanks.

1 Like
4

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; */
}

Kani_0-1659247852713.png
Kani_0-1659247852713.png268×110 3.36 KB

Kani_1-1659247874401.png
Kani_1-1659247874401.png1401×522 17.6 KB

5

@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);
}
1 Like
6

Thanks, its perfect!

1 Like
7

@makingwaveskzoo

Thanks, its our pleasure to help us