This community-built FAQ covers the “Breadcrumb Styles” exercise from the lesson “Learn Secondary Navigation”.

Paths and Courses
This exercise can be found in the following Codecademy content:

## FAQs on the exercise Breadcrumb Styles

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

## Join the Discussion. Help a fellow learner on their journey.

Agree with a comment or answer? Like () to up-vote the contribution!

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I don’t fully understand how the breadcrumbs chevrons were formed. How come by just playing with border size and transparency you created what is essentially triangles?

48 Likes

I agree. I’m currently in the middle of this exercise, and although I’ve fiddled around with devtools to experiment with the chevrons a bit, some further explanation as to how they are formed into arrows would be much appreciated!

16 Likes

I was also wondering this.
It seems like it works because the borders of a container will have 45 degree angles in the corners (like a picture frame). Therefore by making the top and bottom border blue, for example, but making the left border transparent, you are left with a shape created by leftover 45 degree angles from the top and bottom borders. This trick can also be used to make triangles.
Search for css triangle if you want a better explanation!

20 Likes

Can I please ask in the exercise question 2, why do we change the element to “float: left”, instead of “display: inline”. I thought when we are using float, the display is automatically set as “display: block”?
In the result, after changing to “float: left”, all elements stay together in the same line, same behavior as “inline”.

9 Likes

Really appreciate you mentioning this! I have a much better understanding of how this is working based on you mentioning looking up css triangles! Thanks so much!

1 Like

There’s a video at the bottom of this link that REALLY clears it up!

36 Likes

Thank you for sharing. This was an eye opener.

1 Like

Thank you so much! Now I understand the logic of triangle making!

What I don’t quite understand is the logic of “position: absolute;” here. I thought it was just about position but not size. Could anyone tell me why it makes the border vertically shrink?

content: “”;
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}

1 Like

Here, have this.
Check the video

11 Likes

the border has to be shrink to make that triangle appear

1 Like

That helps immensely! Thank you!! I was so confused.

I don’t have a clear answer, however I do know with just “inline” you cannot change the width or height, it would need to be changed to inline-block. I was also wondering why it wasn’t just changed to inline-block.

2 Likes

thank you very much, I have now a better understanding

I do not exactly understand the “left: 100%” can somone help me please?

left: 100%;

border-color: blue;

border-left-color: darkcyan;

border-top-color: red;

border-bottom-color: purple;

}

3 Likes

Why is height included in this styling? It’s my understanding that ‘a’ is an inline element so height would not apply. I removed it with seemingly no effect.

color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
}

2 Likes

yeah i also dont understand why height is there…
I also think it makes no sense at all.

Not sure if this is the correct answer, but MDN says a percentage in relation to the property left means “A of the containing block’s width.

After taking out the background color for .breadcrumb a (to better see the pseudo-elements), I played with the percent value. If I changed the percent value to 50%, it moved the pseudo-element halfway through the < li > text, so I think “containing block’s width” means the width of the link/text, so setting left to 100% would move the triangle/pseudo element after the text.

2 Likes

Hello, just wanted to add some input about this exercise. I really felt this particular lesson was heavy on the copy-paste the code we’ve already written and bingo, now you’ve created something.
Like other commenters I see from before, I really wasn’t understanding how the css was working to make the arrows since I wasn’t having to do it step-by-step myself but simply copy-pasting someone else’s work.

19 Likes