Change of mobile menu color with image on hoover css in portfolio page

Hi community,

By using the following code in custom css about hover on image in the portfolio page,  it messes up the setting for background color and text formatting of the mobile menu.

Example of the code used for item one of the portfolio page:

/* Portfolio hoover Plum */
a.grid-item[href*="/missions/plum"]:hover img {
    visibility: hidden;
    transition: all 0.1s;
}
a.grid-item[href*="/missions/plum"] img {
    transition: all 0.1s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/missions/plum"] .grid-image-inner-wrapper {
    background-image: url(//static1.squarespace.com/static/61bda9ed7e48623e1b183369/t/6399a037dff35264be396284/1671012407313/Logo_plum_2.png) !important;
  background-size: cover !important;
  position: absolute !important;
  width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center !important;
}
 

Page: https://koala-rabbit-5mas.squarespace.com/missions

To see the regular setup for the mobile menu: https://koala-rabbit-5mas.squarespace.com/accueil

Thanks in advance for you help with this!

Your site is private. Can you setup an access password or publish the site?

Hi Tuanphan,

Here is the password: 2022

Thanks for checking!

@tuanphan I moved on to another solution. Thanks for replying to me request!