Mobile menu not working - colors and submenus

Hi There,

On my website highlandgamesbythesea.nl the mobile menu is not working correctly. I have a few questions. I use Airi Free.

  1. I want my mobile menu to show all my pages at one, not submenu’s. I have a primary menu and a mobile menu. The mobile menu is not showing. How can i change this?

  2. I want to change the colors of the menu. I was able to change the background color to orange but now i need to change te colors of the text.

I tried the css down here but then i gett a error because the css is not correct… How can i change the colors of the mobile menu?

(code…
@media (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: #000000;
text-decoration: none;
} end
code…)

Hope to hear form you.

Best regards and sorry for my poor English

Hi,

To make the submenus to always displayed, please try this CSS code:

@media only screen and (max-width: 1024px){
    span.subnav-toggle {
        display: none !important;
    }
    .main-navigation ul ul {
        display: block !important;
    }
}

And this to change the colors and manage the spaces and borders:

@media only screen and (max-width: 1024px){
 .main-navigation ul ul li {
    background-color: orange !important;
    border-left: none;
    border-right: none;
    border: 1px solid rgba(25, 25, 25, 0.1) !important;
    color: white !important;
  }
  .main-navigation li {
    padding-left: 0;
    padding-right: 0;
  }
}