collapse nav bar for restaurant demo

Hello,

Thanks for reporting this!

Currently, changing Mobile Menus on Custom Device Widths is not support but we are working on introducing this soon. Meanwhile, you can either use the following HTML Code:

<div class="header-row justify-content-lg-between">

	<!-- Logo
	============================================= -->
	<div id="logo" class="col-auto mr-lg-0 order-lg-2">
		<a href="demo-restaurant.html" class="standard-logo"><img src="demos/restaurant/images/logo.png" alt="Canvas Logo"></a>
		<a href="demo-restaurant.html" class="retina-logo"><img src="demos/restaurant/images/logo@2x.png" alt="Canvas Logo"></a>
	</div><!-- #logo end -->

	<div id="primary-menu-trigger">
		<svg class="svg-trigger" viewBox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
	</div>

	<!-- Primary Navigation
	============================================= -->
	<nav class="primary-menu col-lg-auto col-xl-4 order-lg-1">

		<ul class="menu-container">
			<li class="menu-item"><a class="menu-link" href="demo-restaurant.html"><div>Home</div></a></li>
			<li class="menu-item"><a class="menu-link" href="demo-restaurant-about-us.html"><div>About</div></a></li>
			<li class="menu-item"><a class="menu-link" href="demo-restaurant-menu.html"><div>Menu</div></a></li>
		</ul>

	</nav>

	<nav class="primary-menu col-lg-auto col-xl-4 order-lg-3">

		<ul class="menu-container justify-content-lg-end">
			<li class="menu-item"><a class="menu-link" href="demo-restaurant-gallery.html"><div>Gallery</div></a></li>
			<li class="menu-item"><a class="menu-link" href="demo-restaurant-blog.html"><div>Blog</div></a></li>
			<li class="menu-item"><a class="menu-link color" href="demo-restaurant-reservation.html"><div>Reservation</div></a></li>
		</ul>

	</nav><!-- #primary-menu end -->

</div>

or you can use the following CSS Codes instead:

.device-lg .menu-container > .menu-item > .menu-link {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 12px;
	letter-spacing: 0;
}

This will definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.