Breadcrumbs styling sizes

[juanperosa]

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.



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.

.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; }

[Beverleyh]

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.

[juanperosa]

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

[Beverleyh]

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;

<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.

[juanperosa]

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.

[Beverleyh]

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)

[juanperosa]

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.

[Beverleyh]

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...

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.

[styxlawyer]

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