Size, color of drop down menu

Hello,
I would like to change the view of drop menu. I have got hamburger menu , and when I press this menu I have got view like this:


How could I change this menu, color , size, font? How could I make this menu not stable - I need to press this menu to hide it.
I will be appreciate for help.

Hello there,

Thank you for contacting us.

To change the font size, font family, and color, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    #mainnav-mobi ul.menu li a,
    #mainnav-mobi ul.menu > li > a {
      font-size: 12px;
      font-family: YourFont;
      color: #fff000;
    }

It should behave like so by default. Do you get it behaves differently? Is it possible to share the link to your website to allow me checking it directly?

Regards,
Kharis
aThemes Support

Thank you very much for your help :).
First - is it possible to reduce the space after leters - this black empty space and how change this back color of menu background.
Second - I expect that this menu will hide itself when I click somewhere on the page or when I go down on the page . (sorry - I prefere not to public the link yet)

Hi,

Thank you for getting back.

If I could understand it clearly, you would use this CSS code:

    #mainnav-mobi ul.menu li a,
    #mainnav-mobi ul.menu > li > a {
      font-size: 12px;
      font-family: YourFont;
      color: #fff000;
      padding-top: 3px;
      padding-bottom: 3px;
    }

    #mainnav-mobi {
      background-color: #000;
    }

This option is currently not available. I am sorry. But I will pass this to our development team to check whether it is possible to do or not.

Regards,
Kharis
aThemes Support

Hi,
Thanks for your respons.
But it is not still what I am looking for - sorry. I was not clear enough.
I would like to make ‘box’ of this drop menu smaller, it is too long. I want to make these lines shorter, because they take too much space. I expected that padding left /right maby changes this ‘box’ size, but this moves the letters only and not reduce free space. I hope I am clear.

I will be greatefull for any news about second problem.

Hi,
Could you please give me any hints ?:slight_smile:
I will be appreciate.

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patience.

Can you provide a screenshot with some annotations to illustrate the final look you want to achieve?

Regards,
Kharis
aThemes Support

Hello
Nice to see you again :slight_smile: :slight_smile:

First image belowe - where I present what I can do now

Second image belowe - where I present red rectangle with ‘X’ , which I would like to cut out, and make the drop menu shorter / narrower. I just want to save this right side with menu content.

To do this, you would add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      #mainnav-mobi {
        max-width: 300px;
        right: 0;
      }
    }

Regards,
Kharis
aThemes Support

Dear Kharis,

Thank you for your help. Could you give me one more advice how to adjust this code for menu on computer screen. Now it works for menu on tablet and mobile but not for computer screen.

Kind regards,

Hi,

Thank you for getting back.

What is your computer screen resolution?

I can suggest with the better code once I get the exact size to use for CSS media query.

Regards,
Kharis
aThemes Support

Hello,
Resolution of my screen is 1920x1080, but will the code work as a responsive ? Will the code work for other kind of screens?

Regards :slight_smile: :slight_smile:

Hello,

Dear Kharis - could you give me any more advice. I know that it is too long conversation but I will be appreciate for more ideas how to solve my issue.

Best regards :):slight_smile:

Hello there,

​Please accept my apologies for the delay in response. I really appreciate your patience.

If I could understand, you want to display mobile menu navigation on desktop screen. Is that correct?

Regards,
Kharis
aThemes Support

Hi,
Now I use hamburger menu on any kind of devices. But after pressing hamburger menu I would like to see the drop-down menu like I showed on the images before. Now the dimension of drop-down menu is too wide on all kind of devices, and it is not fitted to content. I need the code to make this drop-down menu narrower on all kind of devices.

Best regards

Hi,

Can you share a link to your website, so I can take a look and update the code?

Regards,
Kharis
aThemes Support