Change to .site-logo {} causes error in mobile menu

Hi guys,

When I apply the following CSS on my website (https://teachifyapp.com), it causes an issue with the mobile drop-down menu:

.site-header {
background-color: #87a5c1;
opacity: 0.9;
}

Can you let me know where it’s going wrong?

Thanks in advance.

Jack

Hello Jack,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    #slideshow {
      z-index: 9;
    }

    #mainnav-mobi {
      z-index: 9999;
    } 

Regards,
Kharis

Heya, no change I’m afraid despite implementing this change- I tried something similar (playing with the z-index) myself yesterday.

Does it only happen on customizer preview? Have you tried it with real device?

Regards,
Kharis

It happens on live too.

Try applying negative z-index to the main slider.

    .header-slider,
    .header-slider .slide-item{
      z-index: -1 !important;
    }

Let me know how it goes.

Regards,
Kharis

You smashed it, thanks Kharis, all sorted (Y).

We can close the case!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis, I’m afraid I’d like to reopen the case- I’ve realised that the new change has made the button ‘reserva tu clase’ stop working. Can you let me know what CSS might fix this?

The button isn’t recognised to be able to click on it, presumably for the slide being position ‘in front of it’.

We got something different here. See the below screencast. The buttons works fine to me. Please the version of your web browser. Is it the latest?

Regards,
Kharis

Heya explained with video:

To be clear it doesn’t work and I’d say it’s due to the CSS z-index priorities, not the Chrome version I’m using. If you watch the one minute video I show you the CSS as is for a better idea.

Thanks buddy.

Jack

Hello Jack,

I am sorry for the log delay. What about this code?

    @media only screen and (max-width: 1024px) {
      .site-header,
      .site-header.fixed {
        position: relative !important;
        z-index: 9999999;
      }
    } 

Regards,
Kharis

Perfect! It’s working great :).

Thanks Kharis!

Jack

Ah I’ve realised while testing that when you change the screensize it suddenly adds a a solid colour bar across the top of the screen, behind the menu:

Could you let me know why?

I’m talking about on smaller screen sizes, not desktop.

What’s you mobile device screen resolution?

https://www.whatismyscreenresolution.com/

Regards,
Kharis

Despite checking on two devices at the time, the issue has gone away now! Happiness, thank you for all your help mate, if it comes back I’ll let you know but I hope that’s now done.

Regards.

Jack