Well I am truly stumped today, I am trying to recreate this Navbar:
Now if you look at it, it has borders-left and borders-right for the "Buying" link. After digging about in the CSS I have worked out how they have made that possible. They have this HTML:
<ul class="navmain_holder">
</ul>
The developers have added a border-left to that element to create the border at the start of the nav bar.
Now if you take a look at this live header example of my site:
The border is set to the left however if you look at the "Get Finance" link I can't add a right-border to it because then all the other elements will get that border which will cause some borders to appear 2px thick instead of one and as I am using Bootstrap the responsive CSS stops me from approaching this problem in some ways.
I'm sorry I haven't really explained my problem all that well hopefully someone will understand, any help will be much appreciated :)
You can select the last element with the following selector:
ul.nav > li:last-child {
border-right: 1px solid #475d88;
}
It selects only the last li element. Good luck!
EDIT here's a demo fiddle from Harry: http://jsfiddle.net/hari_shanx/D2JzN/
EDIT as Pete has pointed out, you could also add the border-left just to the outer ul element and apply border-right to all the li elements. It's also worth pointing out that if you want to support IE8 the last-child selector is not supported I believe. So you might have to go this route, but from my testing it looks like you aren't trying to support IE8, which is probably better for your sanity. :)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments