One possible solution might be to reduce the space between top level main menu items in the Twenty Twelve theme using a media query that targets browser widths between 481 and 900 pixels. Here is an example you can try out:

Thank you for your assistance. That definitely worked but the items are now a little too close together. What are the variables in the code that I could change, to space the items slightly further apart?