Breadcrumb CSS issue

HTML & CSS
1

Hi there everyone!

I’ve got an issue implementing a CSS breadcrumb from this tutorial: http://red-team-design.com/css3-breadcrumbs/

I’m trying to implement the second example, but have run into an issue. Everything works fine except my current tab is just a square undecorated box: http://schw.im/breadcrumbs.html

In case it’s not displaying the same for you, here’s what I get:

I thought I followed the tutorial correctly, but I’ve obviously messed something up. Could someone set me straight on how to fix the current box?

Thanks for your time!

2

This is overridding some of your regular breadcrumb CSS.

a.current {
border: 1px solid #000000;
font: bold .7em Roboto;
padding: 2px 6px 2px 6px;
cursor: default;
background: #ff7f00;
color: #FFF;
text-decoration: none;
}

Specifically the border and font.

You can manually set the breadcrumbs a{} to override this by doing border:0; and reset the font.

Or you can make that breadcrumb current class into like … class=“breadcrumb-current” and then update the CSS to match.

1 Like
3

Thanks very much for your help, Ryan.

In regards to the first option, are you saying to change in a.current:

border: 1px solid #000000;

to

border: 0;

Also, I’m not sure how to reset the font.

4

In regards to the border: sorta. I’m saying add in border:0; to your breadcrumb current anchor CSS code.

The font only seems to change in the font-size. So on the current breadcrumb you can just set it back to font-size:14px.

1 Like
5

Thanks again, Ryan,

I’ve managed to follow your instruction to fix the current issue. I decided to adopt another version of the tutorials breadcrumb to adapt it to work with my own and I’m having a slight issue getting it to work as I’d like.

Updated page:

What I’d like is for the pointer(triangle) to the right of the link to turn orange with the rest of the link when hovered over. I’ve tried a few different things to make that happen, but none are working.

I thought I was being clever and borrowed the following element from the first version of the CSS:

#breadcrumbs a:hover::after{ z-index: 2; border-left-color: #ff8000; }

Because if I altered the color of the non-hover version of this element, the triangle changed color, but it didn’t work at all as I had intended.

How might I get the triangle to follow suit with the orange on hover-over?

Thanks for your time!

6

Well…I tried what you did and it works for me? :stuck_out_tongue_winking_eye: .

#breadcrumbs a:hover::after {
border-left-color: orange;
}
1 Like
7

I’m such a goof. I had it defined more than one time and it was being overwritten. :flushed:

Thank you so much for all your help. I really appreciate it!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.