Assistance please

  • trapbarn

    (@trapbarn)


    6 years, 12 months ago

    Hi,
    As a mid-range septuagenarian ,I’m having a hard time learning code for WordPress and would appreciate some help with a snippet that has flagged up 3 warnings. The code is…

    /* Suggestion: Sticky bar background when scroll: */
.fusion-header-wrapper .fusion-header-backface.fusion-sticky-shadow {
transform: background 0.3s ease;
}
.fusion-header-wrapper.fusion-is-sticky .fusion-header-backface.fusion-sticky-shadow {
background: rgba(255,255,255,0.8) !important;
}
/* Code ends */

    Warnings say that there are two incidences of Don’t use adjoining classes.

    And one instance of Fallback background (hex or rgb) should precede RGBA background. Use of !important.
    Any help would be appreciated.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • ProjectArmy

    (@supporthero)

    6 years, 12 months ago

    The first warning “Don’t use adjoining classes” refers to .fusion-header-backface.fusion-sticky-shadow. This is valid CSS, but older browsers like Internet Explorer 6 can have problems with 2 adjoining classes. But, that’s a very old browser and I wouldn’t worry about. Warning can be ignored.

    The second warning about fallback color, you simply need a HEX color:

    .fusion-header-wrapper.fusion-is-sticky .fusion-header-backface.fusion-sticky-shadow {
background: rgba(255,255,255,0.8) !important;
background: #FFFFFF;
}

    Also, I believe “transform” isn’t what you need. What you’re looking for is “transition” and using background-color property. The updated code below should do the trick:

    /* Suggestion: Sticky bar background when scroll: */
.fusion-header-wrapper .fusion-header-backface.fusion-sticky-shadow {
transition: background-color 0.3s ease;
}
.fusion-header-wrapper.fusion-is-sticky .fusion-header-backface.fusion-sticky-shadow {
background-color: rgba(255,255,255,0.8) !important;
background-color: #FFFFFF;
}
/* Code ends */

    You can put your CSS code into CSS Validator, which is more accurate than built-in WordPress warnings.

    Again, you can ignore adjoining classes warning.

    Thread Starter trapbarn

    (@trapbarn)

    6 years, 12 months ago

    You are a star! many thanks.

    ProjectArmy

    (@supporthero)

    6 years, 12 months ago

    You’re welcome, happy to help.

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

The topic ‘Assistance please’ is closed to new replies.