How to make mobile+tablet menu transparent

Hello
I an trying to make mobile menu transparent by using this code but it is not working for me. Ou webpage is www.cubicon.ee

    @media only screen and (max-width: 1199px) {
      .main-navigation ul li a:hover, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.current-menu-ancestor > a {
        color: #ffffff !important;
      }
    }

Hi,

Try this CSS code:

    @media only screen and (max-width: 1199px) {
      .site-header .main-navigation {
        background-color: transparent;
      }
    }

Let me know whether it helps or not.

Regards,
Kharis
aThemes Support

Hello

Still the default blue

I used before this code to make my desktop menu transparent. Is there a possibilite that these two codes are not working together?

    .site-info { 
    	display: none; 
    }

    .menuStyle5 .is-sticky .site-header {
        background-color: rgba(0, 0, 0, 0.5);
    }

Hi,

Try this CSS code:

    @media only screen and (max-width: 1199px) {
      .menuStyle5.page-template-template_page-builder .site-header {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }

    @media only screen and (max-width: 1023px) {
      .menuStyle5.page-template-template_page-builder .site-header {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }

Regards,
Kharis
aThemes Support

Thank you. It worked :slight_smile:

2 Likes

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
aThemes Support

1 Like