Issues with my Menu being glitchy on smaller browsers

Question

Hi there,

I'm having issues with my menu being too long and then going to its own line as soon as the browser begins to get smaller - before it goes into mobile responsiveness. Sometimes it seems to work with Chrome but Safari it has never worked.
I have condensed the menu as much as I can but other than what I have now, I don't know a solution. I'm not sure where to edit the code to make the menu collaspe sooner.

the website is painting.scholarsedge.biz
See attached.

SemiColonWeb · Accepted Answer

Hello,

This occurs when there are too many items in the Menu than the available size. You can consider decreasing the Size of the Text in the Menu on these devices:

.device-lg #primary-menu ul li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: 0px;
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

sshunter · Answer

Another image

sshunter · Answer

Didn't upload. Here it is condensed.