Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Rankmath breadcrumb position

Home Forums Support [Resolved] Rankmath breadcrumb position

Home Forums Support Rankmath breadcrumb position

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1764424
    tertas

    Hi,

    Wordpress’s own breadcrumb doesn’t change category if you add 1 product to 2-3 categories.
    But rankmath’s does. Thus I want to go with that.

    I did set hook. https://prnt.sc/12hs4ot
    I copies this css from niche theme before and it is working great with woocommerce breadcrumb.

    .woo-filter-toggle,
    .woocommerce.archive .woocommerce-breadcrumb {
        padding: 0;
        margin-right: 20px;
        float: left;
        line-height: 30px;
    }
    .woocommerce .woocommerce-result-count {
        float: right;
        margin-right: 20px;
        line-height: 30px;
    }
    @media (max-width: 768px) {
        .entry-content {
            display: flex;
            flex-direction: column;
        }
    }
    @media(max-width: 768px) {
    	.woocommerce.archive .woocommerce-breadcrumb {
        padding-bottom: 0;
    		flex: 1;
      }
    	.woocommerce-ordering select {
        padding: 10px;
        margin-bottom: 15px;
    	}
    }

    I have checked and see that rankmath use this class. rank-math-breadcrumb
    So I have edited code as below. But It doesn’t go to upper line in mobile like the original.
    Do you have any suggestion?

    .woo-filter-toggle,
    .woocommerce.archive .rank-math-breadcrumb {
        padding: 0;
        margin-right: 20px;
        float: left;
        line-height: 30px;
    }
    .woocommerce .woocommerce-result-count {
        float: right;
        margin-right: 20px;
        line-height: 30px;
    }
    @media (max-width: 768px) {
        .entry-content {
            display: flex;
            flex-direction: column;
        }
    }
    @media(max-width: 768px) {
    	.woocommerce.archive .rank-math-breadcrumb {
        padding-bottom: 0;
    		flex: 1;
      }
    	.woocommerce-ordering select {
        padding: 10px;
        margin-bottom: 15px;
    	}
    }
    #1764509
    Elvin
    Staff
    Customer Support

    Hi there,

    Your dev site has a frontend password.

    Can you share the credential with us so I could conduct an inspection for the selectors?

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1764992
    tertas

    sure

    #1765883
    David
    Staff
    Customer Support

    Hi there,

    i checked the two versions of the site – and i can’t really see any difference in the styling.
    What should i be looking for ?

    #1765979
    tertas

    Hi David,

    Thanks for your time.
    Issue is on mobile.
    Original breadcrumb go above to sort filters but rankmath one doesn’t.

    #1766153
    Ying
    Staff
    Customer Support

    Hi Tertas,

    Try this CSS:

    @media (max-width: 768px) {
        .archive.woocommerce .inside-article {
            display: flex;
            flex-direction: column;
        }
    }
    #1766171
    tertas

    Hi Ying,

    Worked perfect.

    Thanks

    #1766218
    Ying
    Staff
    Customer Support

    No problem 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.