Airi Mobile Menu Issues

Dear Team,

I am working on the makeyou.digital site again and am almost finished (yay!). I have a couple of questions about some final touches.

  1. I searched the forums and found this to try and solve the issue around link colours for mobile size, but the code from here hasn’t worked. What should I do? :
  1. I also love the dots on the menu, but am unable to locate how to get rid of them on the sub menu items:

  1. Menu navigation is difficult for sub menu items. The plus is unusually to the side, screenshot below:

  1. Sub menu items are the same grey colour as the normal size ones, which does not look good. How to best manage this:

Apologies for the multiple questions, simply trying to resolve this before going live.

Kind Regards,
Meow

Hello there,

To hide the dot that indicates current active menu item, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .main-navigation .sub-menu .current-menu-item:after {
      display: none;
    }

To style the sub menu displayed on smaller screen, you can use the below CSS code:

    @media only screen and (max-width: 1199px) {
      #site-navigation ul ul li {
        background-color: #fff000;
        border: 1px solid #ff0000;
      }  
    }

Regards,
Kharis

Hi Kharis,

Thanks for your reply.

I have removed the sub menu at the moment, as it seems that getting rid of the dots only in the sub menu would not be an option at this stage.

I only wanted to get rid of the dots on the sub menu as per my screenshot, as opposed to the full menu. I have had to change my menu for the moment to remove the sub menu until this is fixed - hopefully in future.

As per my 3rd question though, will there be any way to move the “+” in my 3rd image a little closer to the menu? I have had to remove the sub menu items for now.

Thank you,

Kind Regards,
Meow

Try adding this CSS code:

    @media only screen and (max-width: 1199px) {
      .main-navigation a {
        display: inline;
      }
      .main-navigation ul .subnav-toggle {
        position: static;
        display: inline;
      }
    }

Regards,
Kharis

Hey, I was having the same issue - your CSS moved the plus closer but is now causing an error with the heights of different menu sections

Please provide us a link to your website here, so we can take a look directly.

Regards,
Kharis

hi! could you figure anything out? i really appreciate the help!