Community Forums › Forums › Archived Forums › Design Tips and Tricks › remove parent link from breadcrumbs
- This topic has 10 replies, 2 voices, and was last updated 8 years, 5 months ago by Porter.
-
AuthorPosts
-
November 2, 2015 at 10:33 am #169880design_agencyMember
hi all–
trying to remove the topmost menu item (or just the link) from breadcrumbs as there is nothing on those pages. im using these topmost items as organizers of content, with all the actual content appearing on child pages (submenus).
take a look here so you can see what i mean (password: wonderwoman).
i'd either like to remove "happenings" or simply remove the link. possible?
many thanks for any advice,
emilyNovember 2, 2015 at 12:01 pm #169899PorterParticipantThat's a tricky one! I feel like there should be a filter or way to splice the first element of the array to remove the first item, but I can't find a solid php solution anywhere. That being said, I have a css solution that isn't perfect, but is pretty close:
.breadcrumb:first-child { display: none; }
That will remove the first element of your breadcrumbs on any given page. If you want it to only happen on certain pages, you'll have to make the css a bit more specific to include only those pages.
November 2, 2015 at 12:16 pm #169902design_agencyMemberhay porter, thanks so much for taking a look!
i just popped in the code you sent along and, alas, it removed the whole line.
any other ideas?
November 2, 2015 at 12:31 pm #169903PorterParticipantAh, just saw that it isn't working. I swear I was editing it and saw it work, but the entire thing is removing now - odd.
Quick question, are there any pages (or will there be any) that are 3 levels deep? Right now it's just section / sub-section, if that's the case, we can do:
.breadcrumb a {
display: none;
}This only works if the only link is the first one, and only the first element will be a link if there's two or less levels of breadcrumbs - if there were 3, it would remove the first 2, 4 the first 3, etc.
November 2, 2015 at 12:43 pm #169906design_agencyMemberthe page i originally sent along is definitely the longest, which is 4 levels deep including the top-level item that i'm trying to remove (in this case, "happenings").
otherwise, most pages are 2-3 levels deep, i'll be removing breadcrumbs from any pages that are less than that. did i get at what you were asking?
November 2, 2015 at 12:44 pm #169907PorterParticipantI think I found a solution!
.breadcrumb span:first-of-type { display: none; }
I'll read up on "first-of-type" for my own personal learning, but it appears that it targets the first span of any given type within another div. So in this case, our first element is the first span of it's type within .breadcrumb, and we're setting the display to none. I'm not 100% on browser support, so pop it in and try it out.
EDIT - doesn't work on the long example, back to reading haha.
November 2, 2015 at 12:54 pm #169909PorterParticipantHuzzah?
.breadcrumb .breadcrumb-link-wrap:first-of-type { display: none; }
November 2, 2015 at 12:57 pm #169910design_agencyMemberwow!! totally works!
though now we've got the forward stroke still in there... grrrrrrrrrrr!November 2, 2015 at 1:09 pm #169911PorterParticipantSwoosh~ (that's the sound of magic)
.breadcrumb span:nth-child(2) { display: none; }
The above targets the second span element of the breadcrumbs, which is the separator. I think we're all good now?
November 2, 2015 at 1:13 pm #169913design_agencyMemberunbelievable, truly, works like a charm.
thanks porter... sending a beer your way!
November 2, 2015 at 1:23 pm #169914PorterParticipantYay for beer! Glad we got it working, and I learned a thing or two in the process 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.