### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 4:25am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/1 "2018-02-28T04:25:08Z")
[SitePoint](https://www.sitepoint.com/community/) has a really nice set of nav-pills …
How to create nav-pills like that?
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [February 28, 2018, 4:36am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/2 "2018-02-28T04:36:08Z")
@mrlagmer might be willing to share the CSS.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 28, 2018, 4:43am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/3 "2018-02-28T04:43:04Z")
This might be it
>
---
### Author:  [@mrlagmer](https://meta.discourse.org/u/mrlagmer)
#### Post date: [February 28, 2018, 5:12am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/4 "2018-02-28T05:12:29Z")
Yep cpradio has it that seems to be the CSS for it.
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 5:24am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/5 "2018-02-28T05:24:10Z")
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!
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [February 28, 2018, 5:34am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/6 "2018-02-28T05:34:46Z")
> [@dakotahnorth](#):
>
> Not obvious to me from initial testing why that border is missing
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?
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 5:46am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/7 "2018-02-28T05:46:50Z")
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 🙂
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [February 28, 2018, 6:04am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/8 "2018-02-28T06:04:38Z")
Did you add a custom nav link, eg. maybe for staff-only that isn’t there for non-staff?
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 6:40am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/9 "2018-02-28T06:40:01Z")
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.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 28, 2018, 11:13am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/10 "2018-02-28T11:13:42Z")
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).
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [February 28, 2018, 11:31am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/11 "2018-02-28T11:31:41Z")
> [@cpradio](#):
>
> \> li {
as @cpradio said a live link would help, but I think changing this css to:
```plaintext
> li[title] {
```
Would fix your issue
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 11:42am UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/12 "2018-02-28T11:42:32Z")
Yes … thanks for asking!
[http://millennium.trydiscourse.com/latest](http://millennium.trydiscourse.com/latest)
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 28, 2018, 12:28pm UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/13 "2018-02-28T12:28:24Z")
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.
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 1:06pm UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/14 "2018-02-28T13:06:02Z")
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!
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 28, 2018, 1:08pm UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/15 "2018-02-28T13:08:08Z")
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.
---
### Author:  [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)
#### Post date: [February 28, 2018, 1:18pm UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/16 "2018-02-28T13:18:11Z")
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 🙂)
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:37pm UTC](https://meta.discourse.org/t/how-to-make-custom-nav-pills-like-sitepoint/81742/17 "2024-06-08T12:37:45Z")
This topic was automatically closed after 2292 days. New replies are no longer allowed.