Come creare nav-pills personalizzati come SitePoint

Supporto
1

SitePoint has a really nice set of nav-pills …

24%20PM
Screen Shot 2018-02-27 at 11.23.24 PM.png992×164 9.42 KB

How to create nav-pills like that?

2

@mrlagmer might be willing to share the CSS.

3

This might be it

4

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

5

Brilliant … thanks!

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

19%20AM
Screen Shot 2018-02-28 at 12.20.19 AM.png1210×142 11.5 KB

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

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?

7

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
Screen Shot 2018-02-28 at 12.42.56 AM.png1290×112 20.5 KB

8

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

9

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
Screen Shot 2018-02-28 at 1.36.40 AM.png1692×108 12.3 KB

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

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

11

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

> li[title] {

Would fix your issue

12

Yes … thanks for asking!

http://millennium.trydiscourse.com/latest

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.

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!

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.

16

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