Yoast Breadcrumb Space between Element

  • Resolved shineboyjun

    (@shineboyjun)


    1 year, 8 months ago

    hello, I use the Yoast Breadcrumb and it’s a nice widget and I have modified it via function.php file to meet my needs, but I can’t find a way to increase the space between breadcrumb element.

    For example, the Breadcrumb is “Home > Category > Subcategory”, the space between “Home” element and “Category” element is just ” > “, could I increase the space like increase the margin of separator”>” so what it will be looks like “Home > Category > Subcategory”?

    Thanks in advance for your help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Maybellyne

    (@maybellyne)

    Hello @shineboyjun

    Thanks for using the Yoast SEO plugin.

    The plugin doesn’t have a feature to edit the styling of breadcrumbs. If you want to change the styling of some of the elements, we usually recommend identifying the appropriate CSS selectors (as explained in?this article) and then changing them to your liking using a plugin like?Simple Custom CSS. This plugin will allow you to add your CSS code to your theme. The CSS changes you add to the plugin will be kept even when the theme is updated. If you need further assistance, you may contact your theme developer.

    Thread Starter shineboyjun

    (@shineboyjun)

    Hi @maybellyne

    Thanks for your reply, I did try to modify it via CSS and function.php, but unfortunately, I still can’t find the solution. If you know the element name of the separator, please kindly tell me.

    Thank You!

    Hey @shineboyjun,

    We don’t output any class or id on the elements between, but you can easily select the span elements within .yoast-breadcrumbs to make the necessary margin/padding on them, quick test:

    .yoast-breadcrumbs > span > span {
    margin-right: 10px;
    margin-left: 10px;
    }

    Thread Starter shineboyjun

    (@shineboyjun)

    Hi @jeroenrotty,

    Thanks for your reply, but it doesn’t work.

    Hey @shineboyjun,

    And if you try with .yoast-breadcrumbs span as the selector?

    That works for me though, see https://i.snipboard.io/fJTOAa.jpg

    • This reply was modified 1 year, 8 months ago by Jeroen Rotty.
    • This reply was modified 1 year, 8 months ago by Jeroen Rotty.
    Thread Starter shineboyjun

    (@shineboyjun)

    Hello @jeroenrotty,

    Thanks for your support, your code still can’t work at my Astra theme, but it inspired me and I found the correct selector which works at my site:

    .elementor-widget-breadcrumbs span {
    margin-right: 10px;
    margin-left: 10px;
    }

    But accordingly, the whole breadcrumb will move 10px to the right, but it doesn’t matter.

    Thanks a lot for your patience and kind-heart!

    I couldn’t know that you are using Elementor to build your pages including the breadcrumb widget – but happy to hear you found a solution.

    Thread Starter shineboyjun

    (@shineboyjun)

    hi @jeroenrotty,

    Here is the better solution, with a compensation value to make it move back:

    .elementor-widget-breadcrumbs span > span { margin: 10px; } .elementor-widget-breadcrumbs p { margin-left: -10px; }

    I’m trying to modify the separator color but can’t seem to identify the correct separator class/selector. I’m using the OceanWP theme. I’ve tried the following but it does not work:

    #breadcrumbs .separator {
    color: #FFA345;
}

    Thread Starter shineboyjun

    (@shineboyjun)

    i update the correct css code to add space for the separator while in elementor(astra theme):

    .elementor-widget-breadcrumbs span > span + span {
    margin-left: 10px;
    }

    .elementor-widget-breadcrumbs span > span {
    margin-right: 10px;
    }

    this won’t result the breadcrumb move to right.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Yoast Breadcrumb Space between Element’ is closed to new replies.