Vertical line between navigation titles

Site URL: https://www.philipslotte.se/

Hello,
How can I add a vertical line between my navigation titles?

I've googled and tried different codes, but not been able to find a solution.

I hope that anyone of you can help me! Thanks in advance.

My website: https://www.philipslotte.se/

3 hours ago, Slotte said:

Site URL: https://www.philipslotte.se/

Hello,
How can I add a vertical line between my navigation titles?

I've googled and tried different codes, but not been able to find a solution.

I hope that anyone of you can help me! Thanks in advance.

My website: https://www.philipslotte.se/

Is it the result you want to achieve?

Try adding to Home > Design > Custom Css

.Header-nav-item {
      padding: 0.618em 0.75em !important;
  margin: 0 !important;
  position: relative;
}


.Header-nav-item:after {
  content: '';
  display: block;
  width: 0.5px;
  height: 15px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
}

.Header-nav-item:last-child:after {
  content: none;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

4 hours ago, bangank36 said:

Is it the result you want to achieve?

Try adding to Home > Design > Custom Css

.Header-nav-item {
      padding: 0.618em 0.75em !important;
  margin: 0 !important;
  position: relative;
}


.Header-nav-item:after {
  content: '';
  display: block;
  width: 0.5px;
  height: 15px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
}

.Header-nav-item:last-child:after {
  content: none;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

 

Yes, thank you so much!! 🙂

.Header-nav-item:last-child:after {
  content: none;
}

.Header-nav-item:last-child:after {
  content: none;
}

this portion does not remove the effect after the last nav item. i'm on 7.1. any ideas?

www.koblecreative.com

thanks

On 9/14/2023 at 5:23 AM, gantons said:

.Header-nav-item:last-child:after {
  content: none;
}

.Header-nav-item:last-child:after {
  content: none;
}

 

this portion does not remove the effect after the last nav item. i'm on 7.1. any ideas?

www.koblecreative.com

 

thanks

Because your last item is Koble Creates, you are using CSS code to remove it

To remove an item from Header, no need to use code, just drag it from Main Navigation to Not Linked

In case you still want to keep code, use this code to remove /

div.header-nav-item:nth-child(3) a:after {
    display: none;
}