#[body]#
<nav class="navbar navbar-expand-lg navbar-light bg-secondary justify-content-between p-1 p-lg-0" id="menu">

<span class="navbar-brand mx-2 py-0 align-self-start"><img src="img/admin_logo.png" height="22" width="22"><span class="d-lg-none align-middle"> Админка Бамболо</span></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuCore{root}">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-secondary autosize-menu" id="menuCore{root}">
	<ul class="navbar-nav mr-auto flex-wrap" id="menuCoreNavlist{root}">
		{menu_item}

	</ul>
	<div id="rootMoreBtnWrapper"></div>
	<div class="dropdown align-self-start" id="rootMenuBarDropper">
	  <a class="nav-link text-nowrap text-right bg-secondary align-self-baseline px-2 text-primary dropdown-toggle"  data-toggle="dropdown" href="#">{current_user_name}</a>
	  <div class="dropdown-menu dropdown-menu-right small">
	    <a class="dropdown-item" href="?cat=admin_exit">Выйти</a>
	  </div>
	 </div>
</div>
</nav>

<script>
	document.addEventListener('DOMContentLoaded', function() {

		if (window.innerWidth < 768 ) return; // Только для широких экранов

		var navList = document.getElementById('menuCoreNavlist{root}');
		var navItems = navList.getElementsByClassName('nav-item');
		var moreMenu = document.createElement('li');
		moreMenu.className = 'dropdown dropdown py-0';
		moreMenu.innerHTML = '<a class="nav-link text-nowrap text-left bg-secondary align-self-baseline px-2 text-primary dropdown-toggle" href="#" data-toggle="dropdown"><i class="far fa-bars"></i> Ещё</a>' +
				'<div class="dropdown-menu dropdown-menu-right py-0" style="z-index: 9999"></div>';

		var dropdownMenu = moreMenu.getElementsByClassName('dropdown-menu')[0];

		var fullWidth = 100;
		fullWidth += document.getElementById('rootMenuBarDropper').offsetWidth;
		console.log(fullWidth);
		var hideNext = false;
		for (var i = 0; i < navItems.length; i++) {
			fullWidth += navItems[i].offsetWidth
			if (fullWidth > window.innerWidth) {
				hideNext = true;
			}
			if (hideNext) {
				var clone = navItems[i].cloneNode(true);
				dropdownMenu.appendChild(clone);
				navItems[i].classList.add('d-none');
			}

		}
		if (hideNext) {
			navList.appendChild(moreMenu);
		}
	});
</script>
#[!body]#
#[item]#
<li class="nav-item"><a class="nav-link text-truncate bg-secondary align-middle px-2 text-primary" href="?cat={cat_id}"><img src="{img}" style="height: 13px; width: 13px;top: -3px; position: relative;"> {cat_name} <span class="badge badge-primary"></span></a></li>
#[!item]#
#[item_sel]#
<li class="nav-item active"><a class="nav-link text-truncate bg-grey px-2 text-primary" href="?cat={cat_id}"><img src="{img}" style="height: 13px;  width: 13px;top: -3px; position: relative;"> {cat_name} <span class="badge badge-primary"></span></a></li>
#[!item_sel]#
#[sep]##[!sep]#