really frustrated with the menu

Most restaurants DO NOT have a "one page" menu so I setup a new section for the dining menu but the menu does not work when I link to the pages like a normal Joomla Article. I tried just setting up the menu like a normal Joomla menu but then on a mobile it's terrible and all over the place and does not show like a mobile menu at all. So I created the menu for the dining section similar to the front but now the pages take up the whole screen on the computer when before they had a nice edge on either side.

How can the menu look right on a mobile devise as it is not work at all when using the normal Joomla menu??? That is the big question as the previous answer had no effect on the "mobile" part of the menu.

Create one more row in layout designer and set it's class to be "topmenurow" same as original menu row. Put some module position in it and place menu

I tried to create a container for the menu I created and placed it in
@media (max-width: 810px) but when I do that the menu looses it’s styling from the template style designer. Obviously I am not a programmer.

I would actually prefer to have a drop down menu for the phone view on iPhone or Android. The button does not always show even thought it is set for responsive display.

Another option is to switch the module displaying the menu for mobile phones as I do have other drop down menus that will work.
Can that be done in a container??

See Attached.

My attachment won't attach because it's a PDF with many pictures and text boxes.

Here is a link

www.cafecomal.com/test/files/dining_menu_display.pdf

Open layout.css, wherever you see styling for mnu_topmenuright add same styling but for mnu_diningmenu below it.