How to make custom nav-pills like SitePoint


SitePoint has a really nice set of nav-pills …

How to create nav-pills like that?


@mrlagmer might be willing to share the CSS.

(cpradio) #3

This might be it

(Stuart Mitchell) #4

Yep cpradio has it that seems to be the CSS for it.


Brilliant … thanks!

Applied that file and the dependent properties to the CSS custom area and wound up with this:

Notice the border missing on the right side! Not obvious to me from initial testing why that border is missing!

(Mittineague) #6

Did you go to the “show original” and use the “last-of-type” or just go by what shows in the onebox and leave that part off?


Hmmm … maybe this will answer your question.

Taking a peek at the html … there is one additional list item item. If I delete the list item associated with the blue line, everything looks like it should.

Having said that … I have not idea why there is a blank list item or what to do about it :slight_smile:

(Mittineague) #8

Did you add a custom nav link, eg. maybe for staff-only that isn’t there for non-staff?


A search in meta didn’t turn up anything obvious to me how I would set a staff-only custom nav link.

Double checked the custom CSS/HTML5 area and not doing anything in that area.

Good news is besides for that one area, it is working nicely:

Can you please be more specific WRT how I would to about adding a custom staff nav link.

(cpradio) #10

Do you have a link to your forum? That would help, as I have an idea, but I’m not sure if it would work and SP doesn’t have that extra li (probably because we’re not on latest at the moment).

(Joffrey Jaffeux) #11

as @cpradio said a live link would help, but I think changing this css to:

> li[title] {

Would fix your issue


Yes … thanks for asking!

(cpradio) #13

It might make sense to use .nav-pills>li:nth-last-child(2)>a instead, since there always seems to be an empty li tag on the nav-pills.


Beautiful suggestion! While we still don’t know why there is an extra li tag, this at least makes the nav-pills look correctly once again!

(cpradio) #15

Yeah, just realize there may be other repercussions, such as, the User Profile pages (I didn’t look to see what those look like), Admin Area, etc. I simply know that line would fix the main page. The real solution would be figuring out why that extra li tag exists and stopping it.


I agree … yet the admin didn’t have any repercussions. It looked correct before and after the change you suggested. There might be some other areas lurking around that I haven’t seen yet that are incorrect … but until I find any (or we figure out why there is an extra li, this is the solution I am going with :slight_smile:)