How can I add dividers to my website's top navigation?

Store Design
1

How do I add dividers to my top navigation of my website? I want the dividers to be like this:

About Us | Park Grants | Member Benefits | Join Us | Contact Us

Right now it looks like this

About Us Park Grants Member Benefits Join Us Contact Us

My website is pennsylvaniaparks.org.

I am using the Chicago Turbo theme

Thanks so much in advance!

1 Like
2

@Justin34

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.liquid->paste below code at the bottom of the file.
a.top_link {
    position: relative;
}
a.top_link::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background: #333;
    right: -6px;
    margin-top: 7px;
}
.main-nav .nav--combined .menu li:last-child a::before {
    display: none;
}

After code view

KetanKumar_0-1634787040632.png
KetanKumar_0-1634787040632.png1920×1080 312 KB

1 Like
3

Hi Ketan :slightly_smiling_face: That worked… thanks so much!! I really appreciate it!!

1 Like
4

@Justin34

its my pleasure to help us