Spine Breadcrumb CSS Question

Darter02

For a while now I've had a bit of CSS aimed at a "spine" breadcrumb that stacks on the right side of a desktop screen. It's been working well until a few weeks ago but I'm only now addressing it. it used to stack very nicely but is now all jumbled together.



Sample gallery

Here's the code I am using. I haven't been able to suss out how to fix this. Any help is very, very appreciated.

/*Place spine breadcrumb*/
@media screen and (min-width: 768px) {
 .sm-page-widget-6266593 .sm-breadcrumb {
   opacity: 1;
   position: fixed;
   top: 0;
   left: 94%;
   width: 0;
   margin-left: 5px;
   margin-top: 250px;
   text-align: left;
   padding: 0;
   z-index: 99;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
}


@media screen and (max-width: 1024px) {
 .sm-page-widget-6266593 .sm-breadcrumb {
   display:none;
 }
}

Darter02

I'm still trying to sort this out when I have time and I can't seem to figure out what the issue is. It used to stack like this, the Home icon at the top, and then the parent folder, and finally the actual gallery. Having always be there in the margin allowed users to navigate quickly around the site. Now it's just a jumble. Any pointers would be so welcome.

Here's the code I'm currently using.

/*Place spine breadcrumb*/
@media screen and (min-width: 768px) {
 .sm-page-widget-6266593 .sm-breadcrumb {
   opacity: 1;
   position: fixed;
   top: 0;
   left: 94%;
   width: 0;
   margin-left: 5px;
   margin-top: 250px;
   text-align: left;
   padding: 0;
   z-index: 99;
   letter-spacing: 3px;
   line-height: 150%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
 }
}


@media screen and (max-width: 1024px) {
 .sm-page-widget-6266593 .sm-breadcrumb {
   display:none;
 }
}