[Resolved] Breadcrumbs font custom color

Home Forums Support [Resolved] Breadcrumbs font custom color

Home Forums Support Breadcrumbs font custom color

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1587269
    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

    #1587459
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This should do it:

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

    Hello,

    The below CSS has a stop working

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

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

    #1648315
    David
    Staff
    Customer Support

    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 }

    #1648386
    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.

    #1648510
    Ying
    Staff
    Customer Support

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

    #1648996
    Dev

    Hello,

    I have added the site link in the private box.

    Please let me know.

    #1649273
    David
    Staff
    Customer Support

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

    #1649287
    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.

    #1649339
    David
    Staff
    Customer Support

    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.

    #1649343
    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

    #1649445
    Ying
    Staff
    Customer Support

    Hi Dev,

    Give this CSS a try:

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

    Thanks, it does the job.

    #1650795
    Ying
    Staff
    Customer Support

    No problem 🙂

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