Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

Nav Border Question

Hey guys, I'm really struggling to understand how I can create a nav border like this example:

nav1

As you can see the nav links are separated by a 1px border. I have tried to recreate this however if you look at the one I have made:

nav2

You will notice that between "Home" and "Used Cars" the border is now 2px because the border for left and right have 1px. How can I stop this from happening?

Here is a live example of the header of my site:

http://www.dealerbyte.co.uk/

Any help would be appreciated thanks.

3 Answers

Liam Hammersley
Liam Hammersley
7,991 Points
Liam Hammersley
Liam Hammersley
7,991 Points

If you add the border to the right of every link and then use the :first-child pseudo-element to add the border to the left of the Home link you should get the effect you want.

I hope this helps.

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

Posted too early. Give me a minute.

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points 
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #FFF;
background: -webkit-linear-gradient(#1B3D82,#0F244E);
background: -o-linear-gradient(#1b3d82,#0f244e);
background: -moz-linear-gradient(#1b3d82,#0f244e);
background: linear-gradient(#1B3D82,#0F244E);
border-left: 1px solid #475D88;
border-right:none;
}

Add this to your stylesheet and the double border on navbar links should disappear.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Thanks for that the problem is that the link "Get Finance" has no border on the right of it. I forgot to mention that I need it to have a border on the right. This is why I'm completely confused, if I add a border to the right of the link it will do it to the rest of the links leaving me at the start of my problem which is a 2px border.

Any solutions?

Thanks :)