How to set border-left for navigation menu in css?

Question

Here is my processed jsfiddle: http://jsfiddle.net/nalinc/rym2zku1/9/

nav ul, nav ol { list-style: none; margin: 0; padding: 0; } .nav-item ul { padding: inherit; border: 1px solid black; text-align: left; border-radius: 4px; } .nav-item ul li:hover { background-color: #d1d1d1; } .nav-bar { text-align: center; } @media screen and (min-width: 769px) { .nav-bar--left { display: table; table-layout: fixed; width: 100%; text-align: left; } .nav-bar--left .grid-item { float: none; display: table-cell; vertical-align: middle; } } #nav { position: relative; display: block; list-style-type: none; padding: 0; margin: 20px 0; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", sans-serif; white-space: nowrap; } .nav-bar--left #nav { margin: 1em 0 0; text-align: right; } @media screen and (max-width: 768px) { #nav, .nav-bar--left #nav { width: 100%; white-space: normal; margin: 20px 0 10px; text-align: inherit; } } .nav-item { position: relative; display: inline-block; padding: 2px 30px; } @media screen and (max-width: 768px) { .nav-item { padding: 10px 20px; } } #nav>.nav-item { border-left: 1px solid #e8e8e8; } #nav>.nav-item.first { border-left: none; padding-left: 0; } @media screen and (max-width: 768px) { #nav>.nav-item { border: 0 none; } } .nav-item-link { display: inline-block; color: #211f1f; font-size: 14px; zoom: 1; *display: inline; } .nav-item-link:hover { color: #333; } .nav-item-link .nav-item.active .nav-item-link { color: #333333; } .sub-nav .sub-nav { display: none !important; } .supports-no-csstransforms .sub-nav { white-space: normal; width: 200px; margin-left: -100px; } .sub-nav:before { content: ''; display: block; position: absolute; top: 5px; right: 47%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #211f1f; z-index: 40; } .sub-nav-item, #moreMenu--list .nav-item { display: block; overflow: hidden; padding: 0; margin: 0; background-color: #211f1f; } .sub-nav-item.first, #moreMenu--list .nav-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sub-nav-item.last, #moreMenu--list .nav-item:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .sub-nav-item-link, #moreMenu--list .nav-item .nav-item-link { display: block; padding: 15px 20px; margin: 0; color: #ffffff; text-align: center; border-top: 1px solid #0b0a0a; } .sub-nav-item-link.first, .sub-nav-item-link:first-child, #moreMenu--list .nav-item .nav-item-link.first, #moreMenu--list .nav-item .nav-item-link:first-child { border-top: none; } .sub-nav-item-link:hover, .sub-nav-item-link:focus, #moreMenu--list .nav-item .nav-item-link:hover, #moreMenu--list .nav-item .nav-item-link:focus { color: #ffffff; border-top: 1px solid #0b0a0a; background-color: #0b0a0a; } .sub-nav-item-link:hover.first, .sub-nav-item-link:hover:first-child, .sub-nav-item-link:focus.first, .sub-nav-item-link:focus:first-child, #moreMenu--list .nav-item .nav-item-link:hover.first, #moreMenu--list .nav-item .nav-item-link:hover:first-child, #moreMenu--list .nav-item .nav-item-link:focus.first, #moreMenu--list .nav-item .nav-item-link:focus:first-child { border-top: none; } #nav { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center } #nav a { text-decoration: none; color: #666; display: inline-block; padding: 10px; font-size: 13px; } #nav ul { position: absolute; top: 100%; left: 0; text-align: left; width: 170px; border: 1px solid #ccc; display: none; } #nav li:hover ul { display: block; } 

 <nav id="navWrap" role="navigation"> <ul id="nav"> <li class="nav-item first active"> <a class="nav-item-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-item-link" href="catalog.html">Catalog</a> <ul> <li><a href="#">Data Listing</a></li> <li><a href="#">Web Scheduling</a></li> <li><a href="#">Google Maps Application</a></li> </ul> </li> <li class="nav-item"> <a class="nav-item-link" href="/blogs/news">Blog</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/pages/about-us">About Us</a> </li> </ul> </nav> 

Now I need border-left for each list.

I need like this image:

When I add border-left , it will be affected at border-bottom .

 #nav ul { position: absolute; top: 100%; left: 0; text-align: left; width: 170px; border: 1px solid #ccc; display: none; } 

Can someone help me fix this? Thanks in advance.

Answer 1

hack window shadow!

DEMO: http://jsfiddle.net/rym2zku1/29/

Extra CSS

 .nav-item:not(:last-child) { -webkit-box-shadow: 10px 0px 0px -9px red; -moz-box-shadow: 10px 0px 0px -9px red; box-shadow: 10px 0px 0px -9px red; } 

Vertical stripes are colored red to better highlight the solution.

Result

Explanation

We [ab] using the CSS box-shadow property to draw a partial border around .nav-item elements.

CSS "parts" can be described as follows:

• Horizontal offset , how far right do we want the shadow to sit?
• Vertical offset , how far do we want the shadow to sit?
• Blur radius , how dark will the shadow be?
• Radius of spread , how far does the shadow extend from its edge?
• Color

The hack here is that the shadow is pushed 10 pixels to the right, but the spread (-9px) works against this in order to effectively “get it back” again. This propagation reduction occurs in all dimensions, so we get a 9px “rollback” from the entire height of the element.

Answer 2

change #nav a to

 #nav a { border-right: 1px solid #ccc; color: #666; display: inline-block; font-size: 13px; padding: 10px; text-decoration: none; } 

Answer 3

Here you just make the necessary changes.

 li { border-left:1px solid #ccc; } 

http://jsfiddle.net/rym2zku1/17/

Answer 4

That should work.

Your CSS (updated):

 nav ul,nav ol { list-style: none; margin: 0; padding: 0; } .nav-item ul{ padding:inherit; border: 1px solid black; text-align:left; border-radius:4px; } .nav-item ul li:hover{ background-color:#d1d1d1; } .nav-bar { text-align: center; } @media screen and (min-width: 769px) { .nav-bar--left { display: table; table-layout: fixed; width: 100%; text-align: left; } .nav-bar--left .grid-item { float: none; display: table-cell; vertical-align: middle; } } #nav { position: relative; display: block; list-style-type: none; padding: 0; margin: 20px 0; font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif; white-space: nowrap; } .nav-bar--left #nav { margin: 1em 0 0; text-align: right; } @media screen and (max-width: 768px) { #nav,.nav-bar--left #nav { width: 100%; white-space: normal; margin: 20px 0 10px; text-align: inherit; } } .nav-item { position: relative; display: inline-block; padding: 2px 30px; } @media screen and (max-width: 768px) { .nav-item { padding: 10px 0; } } #nav>.nav-item { border-left: 1px solid #e8e8e8; } #nav>.nav-item.first { border-left: none; padding-left: 0; } @media screen and (max-width: 768px) { #nav>.nav-item { border: 0 none; } } .nav-item-link { display: inline-block; color: #211f1f; font-size: 14px; zoom: 1; *display: inline; } .nav-item-link:hover { color: #333; } .nav-item-link .nav-item.active .nav-item-link { color: #333333; } .sub-nav .sub-nav { display: none !important; } .supports-no-csstransforms .sub-nav { white-space: normal; width: 200px; margin-left: -100px; } .sub-nav:before { content: ''; display: block; position: absolute; top: 5px; right: 47%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #211f1f; z-index: 40; } .sub-nav-item,#moreMenu--list .nav-item { display: block; overflow: hidden; padding: 0; margin: 0; background-color: #211f1f; } .sub-nav-item.first,#moreMenu--list .nav-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sub-nav-item.last,#moreMenu--list .nav-item:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link { display: block; padding: 15px 20px; margin: 0; color: #ffffff; text-align: center; border-top: 1px solid #0b0a0a; } .sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child { border-top: none; } .sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus { color: #ffffff; border-top: 1px solid #0b0a0a; background-color: #0b0a0a; } .sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child { border-top: none; } #nav { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center } #nav a { text-decoration: none; color: #666; display: inline-block; padding: 10px; font-size: 13px; border-left : 1px solid #ccc } #nav ul { position: absolute; top: 100%; left: 0; text-align: left; width: 170px; border: 1px solid #ccc; display: none; } #nav li:hover ul { display: block; } #nav ul li a { border-left: 0 none; } 

Answer 5

You can use a pseudo-element for this. A simple solution would be to use the :before pseudo-element in combination with the first-child selector. This will allow you to "add content until, except the first child li"

 ul{ list-style:none; background:lightgray; padding:5px; border-bottom:1px solid gray; } ul li{ display:inline-block; position:relative; padding-left:10px; padding-right:10px; transition:all 0.4s; } ul li:before{ content:"|"; position:absolute; left:-10%; top:0; } ul li:first-child:before{ content:""; } ul li:hover{ background:darkgray; color:white; } 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 

---

Alternative

---

Instead of using the actual | you can use pseudo in another form:

 ul { list-style: none; background: lightgray; padding: 5px; border-bottom: 1px solid gray; } ul li { display: inline-block; position: relative; padding-left: 10px; padding-right: 10px; transition: all 0.4s; } ul li:before { content: ""; height: 100%; width: 2px; background: gray; position: absolute; left: -10%; top: 0; transition: all 0.4s; } ul li:first-child:before { display: none; } ul li:hover { background: darkgray; color: white; } ul li:hover:before { transform: rotate(90deg); background:black; } 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 

Answer 6

The border you want is inside the indentation ( padding: 2px 30px; ) that you add yourself, as follows: this will avoid this.

 .nav-item { position: relative; display: inline-block; padding: 2px 30px; } 

This can be achieved if you give a border inside #nav li . Here is the fix I'm trying (add this code to your CSS):

 #nav li.nav-item{ border-left:3px solid #000; } 

See my DEMO ;

Answer 7

You need to add some stock to separate it from the upper / lower borders of the container:

 #nav>.nav-item { margin:20px 0; } 

Answer 8

You must add a left border to immediate children ( a ) .nav-item . Then remove the border for a inside the first .nav-item . You will need to interact with padding and aligning the text of the li and a elements to get the distance and height of the left borders in order to look right.

 .nav-item:first-child > a { border: 0; } .nav-item > a { border-left: 1px solid #ccc; } 

Answer 9

Id does something like thi and then changes the min-width in the media request to what suits you best on your site.

 nav ul,nav ol { list-style: none; margin: 0; padding: 0; } .nav-item ul{ padding:inherit; border: 1px solid black; text-align:left; border-radius:4px; } .nav-item ul li:hover{ background-color:#d1d1d1; } .nav-bar { text-align: center; } @media screen and (min-width: 769px) { .nav-bar--left { display: table; table-layout: fixed; width: 100%; text-align: left; } .nav-bar--left .grid-item { float: none; display: table-cell; vertical-align: middle; } } #nav { position: relative; display: block; list-style-type: none; padding: 0; margin: 20px 0; font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif; white-space: nowrap; } .nav-bar--left #nav { margin: 1em 0 0; text-align: right; } @media screen and (max-width: 768px) { #nav,.nav-bar--left #nav { width: 100%; white-space: normal; margin: 20px 0 10px; text-align: inherit; } } .nav-item { position: relative; display: inline-block; padding: 2px 30px; } @media screen and (max-width: 768px) { .nav-item { padding: 10px 20px; } } #nav>.nav-item.first { border-left: none; padding-left: 0; } @media screen and (max-width: 768px) { #nav>.nav-item { border: 0 none; } } .nav-item-link { display: inline-block; color: #211f1f; font-size: 14px; zoom: 1; *display: inline; } .nav-item-link:hover { color: #333; } .nav-item-link .nav-item.active .nav-item-link { color: #333333; } .sub-nav .sub-nav { display: none !important; } .supports-no-csstransforms .sub-nav { white-space: normal; width: 200px; margin-left: -100px; } .sub-nav:before { content: ''; display: block; position: absolute; top: 5px; right: 47%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #211f1f; z-index: 40; } .sub-nav-item,#moreMenu--list .nav-item { display: block; overflow: hidden; padding: 0; margin: 0; background-color: #211f1f; } .sub-nav-item.first,#moreMenu--list .nav-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sub-nav-item.last,#moreMenu--list .nav-item:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link { display: block; padding: 15px 20px; margin: 0; color: #ffffff; text-align: center; border-top: 1px solid #0b0a0a; } .sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child { border-top: none; } .sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus { color: #ffffff; border-top: 1px solid #0b0a0a; background-color: #0b0a0a; } .sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child { border-top: none; } #nav { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center } #nav a { text-decoration: none; color: #666; display: inline-block; padding: 10px; font-size: 13px; } #nav ul { position: absolute; top: 100%; left: 0; text-align: left; width: 170px; border: 1px solid #ccc; display: none; } #nav li:hover ul { display: block; } /** * NEW CODE HERE **/ @media (min-width: 800px) { #nav > li { position: relative; } #nav > li:before { position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ""; width: 1px; height: 15px; background: #ccc; display: block; } #nav .first:before { content: normal; } } 

  <nav id="navWrap" role="navigation"> <ul id="nav"> <li class="nav-item first active"> <a class="nav-item-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-item-link" href="catalog.html">Catalog</a> <ul> <li><a href="#">Data Listing</a></li> <li><a href="#">Web Scheduling</a></li> <li><a href="#">Google Maps Application</a></li> </ul> </li> <li class="nav-item"> <a class="nav-item-link" href="/blogs/news">Blog</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/pages/about-us">About Us</a> </li> </ul> </nav> 

Answer 10

 Border-left: 1px solid #ccc; 

It should work, and it should appear exactly as you requested in the image.

Hope you use a good IDE to write html and css. I am using Microsoft Visual Studio or sublime text. they can easily help you when you cannot remember most HTML or CSS tags.

Answer 11

  #nav { display:inline-block; border-bottom: 1px solid #ccc; padding: 10px 0; } #nav li { display:inline-block; padding-left:20px; padding-right:20px; border-left : 1px solid #ccc; list-style:none; } #nav .first { border:none; } .nav-item ul { display:none;} 

  <nav id="navWrap" role="navigation"> <ul id="nav"> <li class="nav-item first active"> <a class="nav-item-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-item-link" href="catalog.html">Catalog</a> <ul> <li><a href="#">Data Listing</a></li> <li><a href="#">Web Scheduling</a></li> <li><a href="#">Google Maps Application</a></li> </ul> </li> <li class="nav-item"> <a class="nav-item-link" href="/blogs/news">Blog</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/pages/about-us">About Us</a> </li> </ul> </nav> 

Do it like

Answer 12

My updated code has some changes in css and it works according to your requirements

 nav#navWrap { margin: 0 auto; } nav ul,nav ol { list-style: none; margin: 0; padding: 0; } .nav-item ul{ padding:5px; border: 1px solid black; text-align:left; border-radius:4px; } .nav-item ul li:hover{ background-color:#d1d1d1; } .nav-bar { text-align: center; } @media screen and (min-width: 769px) { .nav-bar--left { display: table; table-layout: fixed; width: 100%; text-align: left; } .nav-bar--left .grid-item { float: none; display: table-cell; vertical-align: middle; } } #nav { position: relative; display: block; list-style-type: none; padding: 0; margin:10px 20px 0; font-family: "Raleway","HelveticaNeue","Helvetica Neue",sans-serif; white-space: nowrap; } .nav-bar--left #nav { margin: 1em 0 0; text-align: right; } @media screen and (max-width: 768px) { #nav,.nav-bar--left #nav { width: 100%; white-space: normal; margin: 20px 0 10px; text-align: inherit; } } .nav-item { position: relative; display: inline-block; padding: 10px 30px 20px 30px; } @media screen and (max-width: 768px) { .nav-item { padding: 20px; } } #nav>.nav-item>a { border-right: 1px solid #e8e8e8; } #nav .nav-item:last-child a{ border-right: none; } #nav>.nav-item.first { border-left: none; padding-left: 0; } @media screen and (max-width: 768px) { #nav>.nav-item { border: 0 none; } } .nav-item-link { display: inline-block; color: #211f1f; font-size: 14px; zoom: 1; *display: inline; } .nav-item-link:hover { color: #333; } .nav-item-link .nav-item.active .nav-item-link { color: #333333; } .sub-nav .sub-nav { display: none !important; } .supports-no-csstransforms .sub-nav { white-space: normal; width: 200px; margin-left: -100px; } .sub-nav:before { content: ''; display: block; position: absolute; top: 5px; right: 47%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #211f1f; z-index: 40; } .sub-nav-item,#moreMenu--list .nav-item { display: block; overflow: hidden; padding: 0; margin: 0; background-color: #211f1f; } .sub-nav-item.first,#moreMenu--list .nav-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .sub-nav-item.last,#moreMenu--list .nav-item:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .sub-nav-item-link,#moreMenu--list .nav-item .nav-item-link { display: block; padding: 15px 20px; margin: 0; color: #ffffff; text-align: center; border-top: 1px solid #0b0a0a; } .sub-nav-item-link.first,.sub-nav-item-link:first-child,#moreMenu--list .nav-item .nav-item-link.first,#moreMenu--list .nav-item .nav-item-link:first-child { border-top: none; } .sub-nav-item-link:hover,.sub-nav-item-link:focus,#moreMenu--list .nav-item .nav-item-link:hover,#moreMenu--list .nav-item .nav-item-link:focus { color: #ffffff; border-top: 1px solid #0b0a0a; background-color: #0b0a0a; } .sub-nav-item-link:hover.first,.sub-nav-item-link:hover:first-child,.sub-nav-item-link:focus.first,.sub-nav-item-link:focus:first-child,#moreMenu--list .nav-item .nav-item-link:hover.first,#moreMenu--list .nav-item .nav-item-link:hover:first-child,#moreMenu--list .nav-item .nav-item-link:focus.first,#moreMenu--list .nav-item .nav-item-link:focus:first-child { border-top: none; } #nav { border-bottom: 1px solid #e8e8e8; text-align: center } #nav a { text-decoration: none; color: #666; display: inline-block; padding: 5px 25px 5px 10px; font-size: 13px; } #nav ul { position: absolute; top: 100%; left: 0; text-align: left; width: 170px; border: 1px solid #ccc; display: none; } #nav li:hover ul { display: block; } 

 <nav id="navWrap" role="navigation"> <ul id="nav"> <li class="nav-item first active"> <a class="nav-item-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-item-link" href="catalog.html">Catalog</a> <ul> <li> <a href="#">Data Listing</a> </li> <li> <a href="#">Web Scheduling</a> </li> <li> <a href="#">Google Maps Application</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-item-link" href="/blogs/news">Blog</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/pages/about-us">About Us</a> </li> </ul> </nav> 

Answer 13

Add

 #nav > li {position: relative} #nav > li:before {width: 1px; height: 25px; position: absolute; top: 15px; left: 0px; background: #ccc; content: ""} #nav > li.first:before {display: none} 

Example here

Answer 14

Remove

 @media screen and (max-width: 768px) #nav>.nav-item { border: 0 none; } 

and for .nav-item change

 padding: 0 20px; margin: 15px auto; 

Answer 15

To add a border to the left, use this method

 li { border-left:1px solid gray; } 

the above code creates you 1px solid gray to the left of the menu

you can be even more stylish by adding different colors to each li child

like this

 li:nth-child(n) { border-left:1px solid gray; } 

n represent the number li

In this example, you can use a child

  #nav { display:inline-block; } #nav li { display:inline-block; padding-left:20px; padding-right:20px; border-left : 1px solid #ccc; list-style:none; } #nav li:nth-child(1) { border-left: 4px solid green} #nav li:nth-child(2) { border-left: 4px solid darkgoldenrod} #nav li:nth-child(3) { border-left: 4px solid dodgerblue} #nav li:nth-child(4) { border-left: 4px solid firebrick} .nav-item ul { display:none;} 

  <nav id="navWrap" role="navigation"> <ul id="nav"> <li class="nav-item first active"> <a class="nav-item-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-item-link" href="catalog.html">Catalog</a> <ul> <li><a href="#">Data Listing</a></li> <li><a href="#">Web Scheduling</a></li> <li><a href="#">Google Maps Application</a></li> </ul> </li> <li class="nav-item"> <a class="nav-item-link" href="/blogs/news">Blog</a> </li> <li class="nav-item"> <a class="nav-item-link" href="/pages/about-us">About Us</a> </li> </ul> </nav> 

Answer 16

You can try my trick for this kind of border on the left. Go into your jsfiddle and delete line # 68, 69, 70 in CSS and paste my code in this place. Hope you are looking for something similar.

 #nav>.nav-item { position: relative; } #nav>.nav-item:last-child:after { content: none; } #nav>.nav-item:after { content: ""; position: absolute; right:0; top: 3px; height: 80%; width: 1px; background: #a8a8a8; } 

And do not forget to insert the code below, in which you do not need a viewport.

 #nav>.nav-item { content: none; } 

Answer 17

This might work:

 #nav > li{ padding:10px 0; } #nav > li > a{ padding:5px 20px; /* optional your choice here */ border-left:1px solid #ccc; } #nav > li:first-child > a{ border-left:0; } 

Answer 18

I believe that this is what causes the appearance of the left border

 #nav>.nav-item.first { border-left: none; padding-left: 0; } 

Removing left and right left edge showed left border for Home