Various problems with menu on mobile device

Dear athemes-team,

First of all, thank you very much for this beautiful theme! I love working with the Airi-theme and really appreciate your work.

But I have some problems with the menu on mobile devices.

  1. I have changed the font color in the menu with the code below to dark green and it worked perfectly. However, the pink plus-symbol did not applied this change. What can I do about it? I would love it to be dark green as well.
    .main-navigation .menu .current_page_item a {
    color: #3c7d47;    }
  1. When I open the hamburger menu it is on the lower end of the screen instead of the top one. And it’s sticky, while the close-button for the menu remains at the top. How can I get the menu back to the top?

  2. I want the header (logo and hamburger) to stick at the top even when the user scrolls down the page. Just like the sticky menu in the desktop version. Is there a possibility to do so?

  3. How can I change the subnavigation (“Nachhaltigkeit”) into lower case? I already changed it in the stylesheet.css to text-transform: none but it still does not work.

Every help is appreciated! Thank you very much in advance!

Hello there,

1 & 2

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1199px) {
      .main-navigation li.menu-item-has-children > .subnav-toggle, 
      .main-navigation li.page_item_has_children > .subnav-toggle {
        color: #3c7d47;
      }
    }

    @media only screen and (max-width: 1023px) {
      .mobile-menu-active .main-navigation {
        top: 80px !important;
      }
    }

To make us easier track the progress, is it OK to address those two first?

Let me know how that code works.

Regards,
Kharis

Thank you Kharis for your reply and help!

My first problem was perfectly solved. Thanks a lot!
Unfortunately, the second isn’t. On my phone, the expanded menu is still at the bottom of the screen.

The screenshot from my original post indicates how it currently looks if one opens the hamburger menu and scrolls down: the upper white bar is my header. The grey-ish bar with the headline (“Über CHUOI”) is the text body. The menu is sticky which I want it to be (including with the logo), but it’s currently at the bottom of the screen.

Thank you very much in advance.