I learned from Stephanie Eckles's CSS-Only Accessible Dropdown Navigation Menu. But her responsive design of that dropdowm navigation menu works only for a menu with less than 3 items, not for a menu with more than 4 items.
I would like to keep that menu, but I do not know which solution for the menu with more than 4 items on the mobile phones, making it accessible and usable.
Some articles said the side navigation menu with a hamburger icon isn't accessible and usable.
At my site, on the mobile phone, the menu with more than 4 items overpassed the screen limit.
I am not sure if these menus indicated are accessible and usable on a mobile phone:
What about to keep that same menu and re-use one of these menus for the mobile phones?
A few bits to address here.
Not sure which articles these are but that is not true at all. Obviously you have to implement them correctly (which is why many of them aren't accessible) but there is nothing preventing you from using this pattern.
The hamburger icon itself is an accessibility issue, it is much better to have the word "Menu" next to it, perhaps that is what is confusing the issue here.
This is not a complete solution and although the article does state this it is misleading to think her pattern works with CSS only, it is not fully accessible.
To fix her example there are a couple of things you would need to do:
Use JavaScript to toggle aria-expanded to true when the drop-down menu is opened. You toggle it back to aria-expanded="false" once the menu closes. This is important information for screen reader users.
You also need to stop the drop-down menu opening automatically on focus. A keyboard user is forced to tab through all items in the drop-down menu with the way it is currently implemented. Instead you should attach the open and close of the menu to the Enter key so that users can navigate past the menu item if it is not relevant to them. Luckily this change makes item number 1 easy as you can toggle aria-expanded on Enter.
Ability to dismiss the drop-down with the <kbd>Escape</kbd> key.
There are probably other issues that need addressing but as you can probably tell, far from accessible and not a good example to learn from I am afraid.
As you have run out of horizontal space you only have a couple of options.
The first is to turn the menu into a <select> or a side navigation menu as we discussed earlier.
With regards to an accessible slide out menu this codepen is a good starting point for the general principle, which is taken from this article explaining how to make slide-out menus accessible and why each item is implemented the way it is. I haven't checked it in detail but I couldn't see any immediate flaws / faults and the HTML should be close enough to your existing HTML to allow you to keep the desktop version of your menu (with the fixes stated in the previous section).
Alternatively if you only have 4 main menu items (and this is not likely to change) then you could stack the menu items in a 2 by 2 grid.
This is easily achieved by adding float: left and width: 50% to you menu <li> in your mobile media query, so that they stack into a 2 by 2 grid.
There are other ways to do this but with a brief glance at your site that seems the quickest way to do it.