Problem with menu on tablet

To what? I have it activated for Smartphones and tablets. What would work when the problem is on the tableT

This is the custom code I have right now from other support guy:
@media only screen and (max-width: 990px) {
.logo img { max-width: 70%; }
.logo { left: 0!important;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 90%;
height: auto !important;
margin-left: 0!important;
margin-top: 10px!important; }
}
@media only screen and (max-width: 767px) {
ul#avia2-menu {
display: none;
}
}

The menu also messes up if you increase the desktop screen….menu wraps to a second line. How can we stop this?

Sorry but all of this is getting more and more frustrating with the code.:-( Can we clarify this? Here is what I have after I put in your code..
The main menu with the white background is extending all the way across the page and we do not want that. Just enough to hold what is in the menu and we don’t want it to wrap to a second line if someone enlarges the screen.
Thank you

@media only screen and (max-width: 990px) {
.logo img { max-width: 70%; }
.logo { left: 0!important;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 90%;
height: auto !important;
margin-left: 0!important;
margin-top: 10px!important; }
}
@media only screen and (max-width: 767px) {
ul#avia2-menu {
display: none;
}
}
#top .header_color.av_header_transparency .avia-menu-fx {
background: transparent;
}
#top .header_color.av_header_transparency, #top .header_color.av_header_transparency .phone-info.with_nav span {
color: #000000;
}
.header_color .header_bg, .header_color .main_menu ul ul,.header_color .main_menu .menu ul li a,.header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div,.header_color .av-subnav-menu > li ul,.header_color .av-subnav-menu a {
background-color: rgba(255,255,255,0.3);
}
#top #header_meta a, #top #header_meta ul, #top #header_meta li, #top #header_meta .phone-info {
color: #305c29;
font-size: 12px;
}
.html_header_top.html_bottom_nav_header .main_menu>div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child { width: 73%; }
.av-main-nav > li > a { padding: 0 6px;
}
ul#avia-menu {
background-color: rgba(255,255,255,0.4);
border-radius: 5px;
}
}
div#header_meta {
background-color: rgba(255,255,255,0.5)!important;
}
#top .av_header_transparency #header_meta li {
border-color: rgba(255,255,255,0.25);
font-size: 12px;
}
body {
font-size: 15px;
}
.av_phone_active_right .phone-info {
float: right;
font-size: 12px;
}
#socket .sub_menu_socket {
float: right;
margin: 0;
font-size: 12px;
}
#socket .container {
padding-top: 15px;
padding-bottom: 15px;
font-size: 12px;
}
#footer .widgettitle {
color: #FFFFFF;
font-size: 22px;
}
.main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab {
color: #5F8821;
font-size: 15px;
}
.sidebar_tab, .main_color .tabcontainer .tab {
color: #5F8821;
font-size: 15px;
font-weight: bold;
}
div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
background-color: #e1e7d4;
color: #000000;
}
.newsbox .news-thumb{
display: none;
}
#footer strong.news-headline {
font-size: 14px;
color: #ffffff;
}
#footer span.news-time {
font-size: 14px;
color: #ffffff;
}
#socket .menu {
margin-top: 6px;
font-size: 14px;
}
.widget_recent_entries li a {
font-style: italic;
font-family: “Georgia”, “Times New Roman”, Helvetica, Arial, sans-serif;
font-size: 14px;
}

That is the code support gave me.

Thank you. The only thing I see now is that the main menu background extends past the last menu item. We want it to fit what it there and not extend into an empty area in the menu.
Hope that makes sense.

ALL SET now! THANK YOU. MAHALO! for all of your great assistance. It is truly appreciated.