How To Align Breadcrumbs in GeneratePress?

  • Shivam Pandey

    (@wikihelp360)


    5 years, 9 months ago

    Hello David,
    hope you are fine.

    I am using Rank Math SEO plugin to add breadcrumbs in GeneratePress and to style the breadcrumbs I am using the below CSS code.

    .rank-math-breadcrumb p {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

    But the breadcrumbs are not showing properly, you can see the image below.

    Before.png

    I want to align the breadcrumbs to the center. Please help me to fix this problem.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • David

    (@diggeddy)

    5 years, 9 months ago

    Hi there,

    remove this property from your CSS:

    margin-left: -30px;

    Thread Starter Shivam Pandey

    (@wikihelp360)

    5 years, 9 months ago

    David, I removed the margin-left: -30px; property from the CSS and I got my desired result, so is the below CSS is okay?

    .rank-math-breadcrumb p {
    padding: 10px 10px 10px 35px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

    Could you please check this?

    Leo

    (@leohsiang)

    5 years, 9 months ago

    Looks good to me.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘How To Align Breadcrumbs in GeneratePress?’ is closed to new replies.

Tags