Breadcrumbs are present, but not visible?

  • I’m redesigning my website, which is a nature photography site using pages to structure photos taxonomically (EG, animals->insects->species). Because of the depth of pages, breadcrumbs are very useful.

    However, using the breadcrumb NavXT plugin, it seems to generate the breadcrumb perfectly in the editor, it shows the trail exactly how I want it, but when I preview or publish the changes, there is just a blank area where they should be. Hovering over the area it should be, shows that the links are there, but no text is present/visible.

    I suspect it’s a theme issue, but I have no idea where to start in terms of fixing it.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author John Havlik

    (@mtekk)

    On the linked page, it appears you are using a different breadcrumb plugin to generate the breadcrumb trail. That said, the problem seems to be an inline style that sets opacity: 0. You seem to have some JavaScript that is doing this (disabling JavaScript in my browser’s debugger reloads the page and the breadcrumbs appear).

    Thread Starter zpyder

    (@zpyder)

    Thanks John. I’ve been trying to problem solve it using different plugins, they all exhibit the same behaviour. I did notice with NavXT, if I changed the formatting so that the trail wasn’t linked they remained visible.

    I think this is a theme style issue, it seems odd though that non-breadcrumb links stay visible. I’ll dig into the theme files and chase the theme developer on it.

    Thread Starter zpyder

    (@zpyder)

    I have the ability in my theme to insert css overrides, and adding the following code allows me to alter the opacity of the unlinked part of my trail:

    .breadcrumbs span[property="name"] {
    opacity: 1;
}

    Are you able to offer any advice on what the css name would be for a linked trail? I cannot figure out why it is different to “name”.

    Plugin Author John Havlik

    (@mtekk)

    In your custom.js JavaScript file, the $('.gallery li a span, .columns a span').css('opacity', '0').css('display', 'block'); line is accidentally targeting the breadcrumbs and setting the opacity to 0. I suggest fixing that code so it doesn’t accidentally target the breadcrumbs.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Breadcrumbs are present, but not visible?’ is closed to new replies.