Breadcrumbs Font Size

Vfxdude » BigFeature

Breadcrumbs Font Size

(3 posts) (2 voices)

Started 10 months ago by CofCGrad97
Latest reply from vfxdude

Tags:

breadcrumbs font

CofCGrad97
Member

Hi,

I'd like to change the font size of the Breadcrumbs as they appear on my pages. Can you tell me where to make that change?

Thanks!

Posted 10 months ago #
vfxdude
admin
You can do that with css (add to bottom of style.css (preferably in a child theme)):

.breadcrumbs { font-size: 14px; }

and here's an example how to add a background bar:
```
.breadcrumbs {
    background-color: #333;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
}

.breadcrumbs a { color: #fff; }
```
Posted 10 months ago #

vfxdude
admin

and here's an example of an advanced breadcrumbs styling (deactivate the "Main Site Breadcrumb" and enable the "Link Current Item" in the Breadcrumb NavXT Settings):

.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: brown;
    background: hsla(34,85%,35%,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(34,85%,35%,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(34,85%,45%,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; }

Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.