FAQ: Learn Secondary Navigation - Breadcrumb Styles

Thanks for that resource, I was scratching my head a bit! :raised_hands:

I feel like this needed to be split into 3 different parts: breadcrumbs, shapes and pseudo elements. All three together is causing so much confusion. My mind checked out at part 5 of this lesson. Your telling me, not teaching me. Like what?!

3 Likes

i didnt get any of it

Thanks. I’d never understood it without this.

1 Like

Height is there to match the height of the pseudo-element (i.e. triangle). If you comment out the height and line-height, you’ll see that the pseudo-elements boxes are taller than the boxes containing the a text.

Im a bit confused because even if I copy-paste everything I still get the tails to appear inside of the actual crumb.
Not entirely sure how I would make it appear before correctly.

tails

My code is like in the exercise but with the hover color to red to display the above issue.

.breadcrumb a::before {
  left: -10px;
  border-left-color: transparent;
}
.breadcrumb a::after {
  left: 100%;
  border-color: transparent;
  border-left-color: darkcyan;
}

Is this an issue on my end or have I completely overlooked something?
And how would I make the tail to appear as intended.

1 Like

Based on CSS Tricks: css-triangle (I needed a visual)

HowToMakeArrows-CSS

<!DOCTYPE html>
<!--from CSS Tricks with slight modifications-->
<html>
  <head>
    <style>
      /*you specify 3 borders depending on the type of arrow you want */
      .arrow-up {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid red;
        margin-bottom: 20px;
      }

      .arrow-down {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid orange;
        margin-bottom: 20px;
      }

      .arrow-right {
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 30px solid rgb(255, 255, 5);
        margin-bottom: 20px;        
      }

      .arrow-left {
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 30px solid green;
        margin-bottom: 20px;               
      }
    </style>
    <title>Breadcrumbs</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>    
    <div class="arrow-right"></div>
  </body>
</html>
1 Like

There’s still no explanation as to why we use float left instead of inline-block? really?!

Ahhhh this was so helpful! Thank you!

The before is to ensure that the > does not block the word. the after is to ensure the > is placed on the right of the word. making the >text>

I just copied and pasted from the guidance steps. I did not understand any of the concepts.
It would be better if there was a video explaining clearly about this topic.

7 Likes

Thank you so much for that post! It really cleared things up for me!!

from another comment, inline-block will include white space from the HTML file in-between the elements. Float does not include whitespace from the HTML file. White-Space is when you have spaces in you HTML file outside of tags. I remember hearing that this doesn’t impact the code, but that is not true, because inline-block will show it.

I did the whole lesson and although all the steps where ticked as right,i did not see any change at any steps whatsoever,apart from the floating to the left.No triangles , no arrows ,no end result! The only result was background changing to blue when hovering.Does anyone experienced the same

I need to start again from Pseudo-classes, I’m totally lost now…