-
I tried adding the following CSS individually to style the rank math breadcrumbs, but nothing seems to work.
.rank-math-breadcrumb a {
color: #909090 !important;
}.rank-math-breadcrumb a:hover {
color: #909090 !important;
text-decoration: underline;
}body .rank-math-breadcrumb a {
color: #909090 !important;
}body .rank-math-breadcrumb a:hover {
color: #909090 !important;
text-decoration: underline;
}body .rank-math-breadcrumb a,
button .rank-math-breadcrumb a,
input .rank-math-breadcrumb a,
select .rank-math-breadcrumb a,
textarea .rank-math-breadcrumb a {
color: #909090 !important;
}body .rank-math-breadcrumb a:hover,
button .rank-math-breadcrumb a:hover,
input .rank-math-breadcrumb a:hover,
select .rank-math-breadcrumb a:hover,
textarea .rank-math-breadcrumb a:hover {
color: #909090 !important;
text-decoration: underline;
}nav.rank-math-breadcrumb {
font-size: 14px;
}Here is the page where the breadcrumbs are on:
https://soundshockaudio.com/new-plugins-design-hero-dark/I added the breadcrumbs through the rank math shortcode.
-
Hi there,
Is the CSS still added? I just checked the page and none of your CSS is loading.
I tested the first snippet using the browser inspector tool and it does work:
https://www.screencast.com/t/FqvtYOgjSAre you using any caching plugins? If so make sure it’s cleared and disabled for now.
If that still doesn’t work then please try adding the CSS to the top of the additional CSS field in the customizer
-
I think I found the issue.
I use a style.css sheet in my child theme in the file manager folders to add CSS.
The code worked when I added it to this style.css sheet.
I tried adding the code to WP > customizer > additional CSS and for some reason this didn’t work.
I should be able to use the addition CSS section to try out CSS changes and then add them to the style.css.
When I add CSS to the additional css, sometimes it shows up on the live site and sometimes it doesn’t.
Do you have any idea what might be happneing here?
-
Have you tried this?
If that still doesn’t work then please try adding the CSS to the top of the additional CSS field in the customizer
If that works then it means you have some syntax error in the existing CSS which stops the CSS below the error from working.
Some common errors would be missing closing
}or;etc. -
Okay I added the CSS to the top in the additional css section and it worked.
Does this mean there is an error in the CSS in the additional css or in the style.css sheet or both?
-
It should be in the Additional CSS field.
You can always determine by yourself with a tool like this: https://jigsaw.w3.org/css-validator/#validate_by_input
-
Okay thank you. One last thing. How would I change the color the laste page in the breadcrumb?
-
This should work:
.rank-math-breadcrumb .last { color: #fff; }Please consider checking with Rankmath’s support team for more customization as it’s not related to GP at all.
Thanks for your understanding.
-
Will do! Thank you for your help today Leo.
-
No problem 🙂
- You must be logged in to reply to this topic.