Adjust the size of buttons in the navigation menu

Hi there,

can you provide a link to your site?

BTW it is not recommended to reduce your menu item font size below 16px. It makes it hard to read and impedes accessibility.

Thank you for the reply. Now I have set the size to 12px, but even using the default 15px, I find that there is still too much space between the buttons.

The site is still under construction. I have to add several more buttons to the main menu. It will be quickly full. Here there is a screenshot:
https://drive.google.com/file/d/1wKkJARKN7iiITKbwsDmrIG3q7Yb64rq8/view

• This reply was modified 4 years, 8 months ago by tyco72.

You can reduce the padding around the items like so:

.main-navigation .main-nav ul li a {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

But there are several issues you may create for yourself.
Google may flag #1 – the text as Too small to read and #2 clickable elements too close together.

Font sizes should be a minimum of 16px.
A clickable element should be at least 50px wide by 50px high.
And spacing between them should be around a minimum of 30 – 40px.

You may want to revisit your menu layout.

Thank you! With your help I have found also how to reduce the padding around the arrows of the menu buttons with sub level. The complete code is:

/* main menu font size */
.main-navigation a {
font-size: 15px;
}
.main-navigation .main-nav ul ul li a {font-size: 15px;
}

/* main menu button padding */
.main-navigation .main-nav ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
}
.dropdown-menu-toggle {
padding-right: 0px
!important;
padding-left: 4px
!important;
}

Reducing the padding helps much. When I will have added all buttons, I will keep the fonts and padding larger as possible. But surely the default settings are too big for a menu with many buttons.
What do you mean exactly about the flags by google? What problems could I have?
In the GeneratePress main menu there is no separation area (non clickable) between the buttons.

These are the two warnings you may receive from Google if font size is too small and menu items are too close together:

#1 – the text as Too small to read
#2 – clickable elements too close together.

Both are potential accessibility issues and they can negatively effect your ranking.

The default sizes the theme uses comply with those accessibility requirements.

Thank you, I will keep it present. I will keep the buttons larger as possible.

You’re welcome