Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do you add vertical lines ( | ) between the items of your navigation bar/header?


cenmor

Question

I'm on a new 7.1 template and I'd like to add vertical lines as my spacers between navigation items. I used some code to try and get it working but it didn't do it for me. Can someone help?

Here's the code I used:

/* Add vertical links */
.site-navigation .nav-item {
   border-right: 1px solid #000 !important;
}
/* Hide vertical last item */
.site-navigation .nav-item:last-child {
   border-right: none !important;
}
/* Change spacing */
.site-navigation .nav-item span {
   padding-right: 10px;
}

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Ghost has a free plugin that does this... you'd just want to change out the content from a slash to a vertical line. https://www.ghostplugins.com/steps/9sywh58h

@christypriceThat worked perfectly. Thank you!

@KristenisNeat Great question! You'd just want to change up the code a bit from Ghost like this: .Header-nav-item:not(:last-child):after {  

Posted Images

8 answers to this question

Recommended Posts

  • 0

Ghost has a free plugin that does this... you'd just want to change out the content from a slash to a vertical line.

https://www.ghostplugins.com/steps/9sywh58h

Link to post
  • 0

I think I found your page on another post.

Try this:

.header-nav-list .header-nav-item:not(:first-child) {
    border-left: 1px solid black;
    margin-left: .7vw !important;
    padding-left: .7vw !important;
}

 

Link to post
  • 0

@KristenisNeat

Great question! You'd just want to change up the code a bit from Ghost like this:

.Header-nav-item:not(:last-child):after {

 

Link to post
  • 0

@christyprice Thank you! I'm a bit of a newb here - do I replace a portion their code or just add it in? I've added it in, it tells me it needs an end bracket so I added one (had no idea where but took my best guess line 33)... and nothing happened. I am 100% sure it's user error LOL Help!

image.png.3d4202be25efc8fded4932ee54ee7492.png

Link to post
  • 0

@KristenisNeat you'd want to replace

.Header-nav-item:after {

with

.Header-nav-item:not(:last-child):after {

in the original code.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...