[Resolved] Breadcrumbs font custom color

[Dev]

Hello,

I want that link color in breadcrumbs should remain black, and then when someone hover over it, it turns ORANGE #f58000

Please check the below screenshot for better details.

https://prnt.sc/w63d72

[Tom]

Hi there,

This should do it:

.rank-math-breadcrumb a {
    color: #000;
}

.rank-math-breadcrumb a:hover {
    color: #f58000;
}

[Dev]

Hello,

The below CSS has a stop working

.rank-math-breadcrumb a {
color: #000;
}

.rank-math-breadcrumb a:hover {
color: #f58000;
}

[David]

Hi there,

check your CSS what i can see in the cached CSS is:

@media (max-width: 768px) {
    .secondary-navigation {
        text-align:center !important
    }

    .secondary-navigation ul {
        display:block
    }

    .secondary-navigation .sf-menu > li {
        float: none;
        display:inline-block !important
    }

    @media (min-width: 769px) {
        .inside-right-sidebar, .inside-left-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top:60px
        }

        .sidebar .widget_media_image {
            text-align:center
        }

        .rank-math-breadcrumb a {
            color:#000
        }

        .rank-math-breadcrumb a:hover {
            color:#f58000
        }
        /* More code below */

You have a Media query inside another media query which will not work.
Each media query must be closed with a }

[Dev]

Hello,

Okay, I correct all the CSS issues. But the below CSS is not working.

.rank-math-breadcrumb a {
color: #949494;
}

.rank-math-breadcrumb a:hover {
color: #459285;
}

I disabled the Autoptimize plugin to insert all required CSS one by one again. After that, I enable the Autoptimize plugin and found the below CSS is Not working.

I’m using the settings of Autoptimize as guided by the GPP forum only. I had seen prior also Autoptimize create color and font issues with the WPSP plugin as well.

[Ying]

Can you link us to the site in question, thanks!

[Dev]

Hello,

I have added the site link in the private box.

Please let me know.

[David]

Where have you added the CSS? I am not seeing it anywhere in your site

[Dev]

Hello,

.rank-math-breadcrumb a {
color: #949494;
}

I changed the above color code to #666666

The rest of the CSS is the same.

The code is in the simple CSS plugin. Its there.

I have also added the wp-admin login details in the private box.

[David]

Try making your CSS selectors more specific eg.

.entry-header .rank-math-breadcrumb a {
  color: #949494;
}

.entry-header .rank-math-breadcrumb a:hover {
  color: #459285;
}

And make sure to clear all your caches.

[Dev]

Hello,

Thanks, it worked perfectly.

One last thing. The last part of breadcrumbs is of black color. I want to make it also of #666666 color code. Please see the below screenshot.

http://prnt.sc/ynz1jy

[Ying]

Hi Dev,

Give this CSS a try:

.rank-math-breadcrumb .last {
    color: #666666;
}

[Dev]

Thanks, it does the job.

[Ying]

No problem 🙂

[Author]

Posts