Breadcrumbs styling sizes

Hi there,

I was practising my CSS coding skills ( i am still a noob xD ) and tried to create my own breadcrumbs styles for my website, but i am missing something about sizes.

Attachment 5708

My problem is that each crumb gets the size of the original title of the page, instead of following the one i wrote on the code, and that's the problem i don't understand.

I will attach the CSS used on it (ignore colors, still working on it), so you can tell me wether or not there's a mistake on it.

Thanks in advance for your help.

Code:

---

.breadcrumbs {
    overflow: hidden;
    font: 16px Helvetica, Arial, Sans-Serif;
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: white;
    text-decoration: none;
    padding: 5px 0 5px 55px;
    background: cyan;
    background: hsla(250, 100%, 52%, 1);
    position: relative;
    display: block;
    float: left;
}
.breadcrumbs a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(250, 100%, 52%, 1);
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}
.breadcrumbs a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}
.breadcrumbs a:first-child {
    padding-left: 10px;
}
.breadcrumbs a:nth-child(2)      { background:        hsla(250, 100%, 52%, 1) }
.breadcrumbs a:nth-child(2):after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumbs a:nth-child(3)      { background:        hsla(34,85%,55%,1); }
.breadcrumbs a:nth-child(3):after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumbs a:nth-child(4)      { background:        hsla(34,85%,65%,1); }
.breadcrumbs a:nth-child(4):after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumbs a:nth-child(5)      { background:        hsla(34,85%,75%,1); }
.breadcrumbs a:nth-child(5):after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumbs a:last-child a {
    background: white !important;
    color: black;
    pointer-events: none;
    cursor: default;
}
.breadcrumbs a:hover { background: hsla(34,85%,25%,1); }
.breadcrumbs a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

---

A link to your actual web page so we can see how the cascade of other styles is affecting things would be better. A live page makes it easier to do edits in developer tools too - code dumps mean extra work for us, having to create a page.

Sure, i didn't attach my website because i deactivated the breadcrumbs for the negative impact it could have on my visitors, but i can let it activated for a while. My website is http://ratonesgaming.com

For some reason, you have <h1> tags in your breadcrumbs so they're screwing around with the size and semantics - the source of your web page is this;

Code:

---

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to Ratones gaming." href="http://ratonesgaming.com" class="home">Ratones gaming</a></span> &gt; <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to OFERTAS DE LA SEMANA." href="http://ratonesgaming.com/oferta-de-la-semana/" class="post post-page current-item"><h1 style="text-align:center"><strong>OFERTAS DE LA SEMANA</strong></h1></a></span></div>

---

I notice that you are using Wordpress. Unfortunately, I'm not a Wordpress user so I couldn't tell you why or where these h1 tags are being inserted, or how to fix it (except for setting CSS font-size overrides, but that won't fix the semantics), but maybe it will give you a starting point.

Thanks for your help, i managed to override the sizes modifying php files, and now displays well.

Now i have the next issue: i am using page's titles as breadcrumbs, but some pages do not have title, so does not work for those pages. I found a way to fix it, adding an invisible title for those pages, but i don't know wether or not this could have a negative impact in some way, or if there's another way to fix it.

Quote:

---

i am using page's titles as breadcrumbs

---

Have you got links for examples of both types of pages? I'm not sure what title you mean or how it's affecting the markup (e.g. text between the <title> tags or page headings in <h?> tags)

By title i mean the page title itself, the first column of page's dashboard, not the title tag, which would be so long for breadcrumbs.

I attach a photo so you can see what i mean and the html i used so all pages appear on breadcrumbs, having an invisible title when i did not use one, so breadcrumb uses this "invisible" custom title heading, instead of nothing.

Attachment 5712

I'm still none the wiser. Im not a Wordpress user - I don't understand how this fits into or affects the page source, or what part of the "dashboard" affects X of the web page structure.

The image means nothing in the grand scheme of things. Where exactly in the markup does that code appear? That's why I asked for links to example pages so I could see the source code (hoping to glean some meaning from your post).

Going back to your post...

Quote:

---

i am using page's titles as breadcrumbs, but some pages do not have title, so does not work for those pages. I found a way to fix it, adding an invisible title for those pages, but i don't know wether or not this could have a negative impact in some way, or if there's another way to fix it.

---

I don't really understand what youre asking. Breadcrumbs are not part of a web page structure in the same sense that a <title> is, so they don't have any bearing on page semantics. They're normally just a series of anchor tags that help with user experience.

There are several Wordpress plugins to create Breadcrumbs. This is probably the most powerful of them and might be worth a try.