Hi,

The code will look like below:

<nav class="collapse navbar-collapse navbar-right navbar-main-collapse" role="navigation">
    <ul id="nav" class="nav navbar-nav navigation">
        <li class="page-scroll menu-item">
            <a href="#1">Menu title</a>
            <ul class="submenu">
                <li><a href="#sub">This submenu</a></li>
                <li><a href="#sub">This submenu</a></li>
            </ul>
        </li>
    </ul>
</nav>

Please add the css code in the path: template-folder -> css -> elixir.css, please put it in the end of the file:

@media only screen and  (max-width : 768px) {
.navbar-nav > li:hover > .submenu {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 5%;
    top: 20px;
}
.navbar-nav > li > .submenu li {
    margin: 10px 0px;
}
}

Then download the fix file and replace it in: /classic american grill restaurant/js/default.js.

Download link here: https://jellythemes.ticksy.com/?dl=728785