Top Navigation

Solved
Justin34
Excursionist
66 0 10

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!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24918 2497 9034

This is an accepted solution.

@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

 

 

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 3 (3)
KetanKumar
Shopify Partner
24918 2497 9034

This is an accepted solution.

@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

 

 

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Justin34
Excursionist
66 0 10

Hi Ketan That worked... thanks so much!! I really appreciate it!!

KetanKumar
Shopify Partner
24918 2497 9034

@Justin34 

its  my pleasure to help us 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing