reduce z-index

  • Resolved jessicaZ

    (@jessicaz)


    5 years, 11 months ago

    Hi, I’ve got a mailchimp popup banner that is conflicting with the mobile menu. I’d like to reduce the z-index of the menu so that it appears below the pop up, so people can x out of the pop up. I’ve tried adding this to the custom css without success:

    @media only screen and (max-width: 801px)
    .mob-menu-header-holder.mobmenu {
    z-index: 99 !important;
    }
    and this
    @media only screen and (max-width: 801px)
    .mob-menu-header-holder {
    z-index: 99 !important;
    }

    any ideas?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Rui Guerreiro

    (@takanakui)

    Hi @jessicaz,

    The custom css field of WP Mobile Menu is already wrapped by a media querie.
    I would suggest that you add the CSS in the Theme customizer in the Additional CSS option.

    It was missing some brackets, use the code below.

    
@media only screen and (max-width: 801px){
    .mob-menu-header-holder {
     z-index: 99 !important;
    }
}

    Clear the cache and test again. Let me know the result.

    Thread Starter jessicaZ

    (@jessicaz)

    Thanks! I ended up increasing the z-index of the mailchimp banner, basically approaching it from the opposite angle. But this may help someone else. I appreciate your time.

    Plugin Author Rui Guerreiro

    (@takanakui)

    No problem. I’m glad it’s sorted.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘reduce z-index’ is closed to new replies.