Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

rank math breadcrumb and woocommerce sort alignment

  • Hi there,
    I know it is not directly related with you. But I believe some css should fix it.
    I use rank math’s breadcrumb and regular sort options.

    When or if you have time can you suggest something?

  • Hi there,

    Try something like this:

    .rank-math-breadcrumb {
        position: absolute;
    }

    Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

    Using absolute positioning isn’t the best for responsive display sometimes so you might want to do some testing and add media queries to it if needed: https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    Hope this helps ๐Ÿ™‚

  • yes, thanks.
    That solved the issue ๐Ÿ™‚

  • No problem ๐Ÿ™‚

  • Sort and breadcrumb was on top of each other on mobile. That makes it better.

    @media (min-width: 769px) {
        .rank-math-breadcrumb {
            position: absolute;
        }
    }
  • It is great on categories but it doesn’t shown in single product pages.

  • Hi there,

    can you share a link to where we can see the issue?

    NOTE: a resolved topic will remove private information.

  • Hi David,

    here it is.

  • The private info field didn’t save as the topic is still marked as resolved.

    Are we still on the alignment issue? If so please uncheck the Mark this topic as resolved then provide the link again.

    If this is a new question then please open a new topic.

    Thanks!

  • hi,
    Above css works well in category page and mobile.
    But when I open single products on desktop, product image covers breadcrumb.
    I am not sure what I can do more.

    @media (min-width: 769px) {
        .rank-math-breadcrumb {
            position: absolute;
        }
    }
  • You can make the code to target WooCommerce archive only by doing this:

    @media (min-width: 769px) {
        .woocommerce.archive .rank-math-breadcrumb {
            position: absolute;
        }
    }

    And perhaps have another set of code for single product only:

    @media (min-width: 769px) {
        .woocommerce.single .rank-math-breadcrumb {
            /*CSS here*/
        }
    }

    Unfortunately we cannot provide a full custom solution here as it’s more of a WooCommerce and Rankmath related issue.

    Thanks for your understanding.

  • Hi Leo,

    That is more than enough support.
    Thanks a lot.

  • Glad to help ๐Ÿ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘rank math breadcrumb and woocommerce sort alignment’ is closed to new replies.