Breadcrumbs trail spacing now too wide? Any help appreciated.

pmbpro

Hello all,

I hadn't made any code changes to my site in many months, however, I'm now seeing that my breadcrumbs feature looks drastically different. Instead of the links being close together as usual, with the current page being in the Blue colour I specified, the Breadcrumb trail now has huge spaces between each link (i.e. spread out more), and, no Blue text on the current page.

Here's a sample link:

http://www.pmbimages.com/Film-Stills/Portfolio/Recall-2015/

I've compared the code I'd backed up and saved on my computer, with what is on the site, and saw no changes that I can recognize. I also saw this problem on my Mac desktop computer and Macbook Pro, and with both Firefox and Safari (I do not use Chrome). :scratch

Can anyone see it? How can I fix the problem?
Any help will be appreciated.

denisegoldberg

I suspect at least part of the problem is due to a change in the element used to define the breadcrumb. See discussion in threads Smugmug update - Gallery title? and Breadcrumb Content Block Update / Customization Issues.

References to .sm-breadcrumb-item need to be changed to .sm-breadcrumb.

That should give you a starting point. I don't know what is causing the spacing issue.

--- Denise

Allen

This in the CSS is spreading out the breadcrumb. Ugly huge margin.
Your CSS adds R & L margin to each one.
.sm-user-ui .sm-breadcrumb {
margin: 30px;
}

Checked my Smugmug style gallery and it had this. Still too wide but only adds left margin.
.sm-breadcrumb {
margin-left: 20px;
top: 0px;
position: relative;
max-width: 960px;
}

I am thinking that Smug wanted left margin for the whole line .sm-breadcrumbs.
.sm-breadcrumb is for each li item under the ul. (used to be named .sm-breadcrumb-item)
Hey Smug, need to remove those breadcrumb li margins! class name .sm-breadcrumb

pmbpro

Thanks so much, Denise and Allen!
Sorry, I didn't realize there was a thread about this issue already. I'd searched for 'Breadcrumbs' as a thread title and didn't get those threads in my results.

I did manage to get the margins back; I just changed my margin value I had, to "zero", and I never had a value for the other side.

I also got the Blue text colour back too, but the ">" separator is also Blue (it wasn't originally). I can live with that though. The blue text and the margin was more important. I'd tested the site with friends, and they say it looks good on their end. Hopefully others can see the fix now too.

http://www.pmbimages.com/Film-Stills/Portfolio/Recall-2015/

Thanks again!

Allen

Maybe this
.sm-breadcrumbs ::before {color:#D8DADE}
.sm-breadcrumbs li:nth-of-type(4) {color:#00C4FF !important}

pmbpro

Allen wrote: »

Maybe this
.sm-breadcrumbs ::before {color:#D8DADE}
.sm-breadcrumbs li:nth-of-type(4) {color:#00C4FF !important}

Wow, this new code worked instead of my old one (not sure why the old one stopped working), so the separators are coloured Grey again.

Thanks again, for this fix, Allen!