would like to not list submenu items in mobile menu

Gourav, good morning sir.

You have helped me with this in the past.

@media only screen and ( max-width: 768px ) {
ul.ddsmoothmenu {
display: none;
}
.it_mobile_menu a {
display: block;
padding-left: 15px !important;
color: #3B3B3B;
padding-top: 7px;
padding-bottom: 7px;
}
.ddsmoothmenu .sub-menu{
margin-left:100px !important;
visibility:hidden;
}
.ddsmoothmenu .sub-menu li{
margin: 0 !important;
padding: 0 !important;
margin-left:200px !important;
clear:both;
left:20px;
}
.mobile_nav {
display: inline-block;
text-shadow: 1px 1px 0 #fff;
}
.ddsmoothmenu {
text-align: center;
}
#menu li {
float:none !important;
text-shadow: 1px 1px 0 #fff;
}
#MainNav {
text-align:center;
}
}


I had removed this, yet had to reinstate it as the solution do not really solve the problem.
Is there some way in this code snippet or elsewhere where I can just have the top level menu itme show up in the mobile menu.
Not to list the subment items.

Here is the site in development: http://eic8.eng.fiu.edu/cec-new
on the tablets, eveything is good, yet on the iphone and handhelds, I would like for only the top
6 menu items to show up in the mobile navigation menu. Please advise.
Thank you

Amado Gonzalez

 

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 480px) {
.it_mobile_menu li li a {
display: none;
}}

 

Perfect Nitesh,
Thank you so much, just checked the mobile navigation menu through iphone,
works really nice now.
I appreciate it.

 

Used same code for IPAD, just changed to
(max-width: 768px)