SitePoint has a really nice set of nav-pills … [24%20PM] How to create nav-pills like that?

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.

@mrlagmer might be willing to share the CSS.

This might be it assets/stylesheets/common/components/navs.scss master > a { border-top: 1px solid $gray-lighter-SP; border-bottom: 1px solid $gray-lighter-SP; color: $gray-text-SP; font-weight: $font-weight-medium-bold-SP; } &:first-of-type { > a { border-left: 1px solid $gray-lighter-SP; border-top-left-radius: $border-radius-default-SP; border-bottom-left-radius: $border-radius-default-SP; } } &:last-of-type { > a { border-right: 1px solid $gray-lighter-SP; border-top-right-radius: $border-radius-default-SP; border-bottom-right-radius: $border-radius-default-SP; This file has been truncated. show original

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: [19%20AM] Notice the border missing on the right side! Not obvious to me from initial testing why that border is missing!

[image] 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?

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: [56%20AM]

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: [40%20AM] Can you please be more specific WRT how I would to about adding a custom staff nav link.

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

[image] cpradio: > li { as @cpradio said a live link would help, but I think changing this css to: > li[title] { Would fix your issue

How to make custom nav-pills like SitePoint

Product Support

dakotahnorth February 28, 2018, 1:06pm 14

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!

Topic		Replies	Views
Empty <li> in Discourse navigation Development	1	585	October 21, 2022
How to Add Custom Menu to Header Nav like Sitepoint UX	4	3268	February 5, 2017
Able to use the 'extraNavItem' custom html outlet? Development	5	2616	February 14, 2017
Custom Top Navigation Links Theme component official , top-navigation-links	33	19231	December 14, 2025
Custom nav items no longer showing after recent update Product Support	6	1530	December 8, 2019

How to make custom nav-pills like SitePoint

Related topics