Changing text colors of breadcrumbs

#12179
Viewing 10 replies - 1 through 10 (of 10 total)
  • Hello,

    Thank you for contacting Rank Math today.

    You can inspect the page using your browser developer tools to identify the selector and then target the same with some CSS.
    Feel free to share your site link on the sensitive data section and the HEX color code that you would like to change to so that we can help further.

    Looking forward to helping you. Thank you.

    ​​​​​​

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    Hi there,

    Thanks for the follow up.

    The hyperlinked crumbs will be controlled by your theme’s primary color / link settings but you can control the color of the current page by using the following example CSS on the custom CSS section of your theme:

    .rank-math-breadcrumb{
    	color:green;
    }

    I hope this info helps. Thank you.

    Thanks. One thing though, when I place this

    .rank-math-breadcrumb {
    	color:#dd3333;
    	font-weight: bold
    }

    It makes the whole line Bold, I only need it to have the last one bold which would be in this case frequently asked questions

    cheers.

    Hi there,

    Thanks for the follow up.

    You can modify the code to the following:

    .rank-math-breadcrumb .last{
    	color:#dd3333;
    	font-weight: bold;
    }

    I hope this helps. Thank you.

    Haha so crazy simple..now I feel stupid.

    Thanks for helping man.

    Unfortunately one more thing, I tried several CSS but the first one (home) what’s the css for the link color and hover?

    Tried the breadcrumb css with a and a hover must be putting it in the wrong order.

    Cheers.

    Hi Toro,

    Thanks for the response.

    The anchor tag colors are controlled by your theme’s link settings.
    Please modify these from the style settings.

    I hope this info helps. Thank you.

    Cheers, it was a setting in elementor section I had to change.

    Got everything working exactly as I want now.

    For people who might need a similar answer in the future, this is what I have now 🙂

    .rank-math-breadcrumb .last {
    	font-weight: bold
    }
    .rank-math-breadcrumb a:hover {
      text-decoration: underline;
    }
    .rank-math-breadcrumb {
        font-size: 14px;
    }

    Hello,

    We are super happy that this resolved your issue. If you have any other questions in the future, know that we are here to help you.

    If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/?rate=5#new-post about your overall experience with Rank Math? We appreciate your time and patience.

    If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

    Thank you.

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

The ticket ‘Changing text colors of breadcrumbs’ is closed to new replies.