Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.

Posted too early. Give me a minute.

.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

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 :)