bootstrap toggle-button breacpoint

bootstrap-toggle-button.css

//bootstrap toggle-button breacpoint

Bootstrap 4 using the navbar-expand-* classes:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

@media (max-width: 1200px) {
	.navbar-header {
		float: none;
	}
	.navbar-left,.navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
	}

	.navbar-fixed-top {
		top: 0;
	}
	.navbar-collapse.collapse {
		display: none!important;
	}
	.navbar-nav {
		float: none!important;
	}
	.navbar-nav>li {
		float: none;
	}

	.collapse.in{
		display:block !important;
	}
}

//скрыть полосу прокрутики
.navbar-collapse {
	overflow: hidden;
}

.collapse.in {
	overflow-y: hidden;
}

//анимированная кнопка
<button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse" id="navbar-collapse-x">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="#">beratung</a></li>
<li><a href="#">gratis check</a></li>
</ul>
</div><!-- /.navbar-collapse -->

.navbar-toggle {
	background-color: transparent;
	padding: 0;

	.icon-bar {
		width: 37px;
		height: 3px;
		background: @yellow;

		+ .icon-bar {
			margin-top: 7px;
		}
	}
}

.navbar-toggle {
	border: none;
	background: transparent !important;
}

.navbar-toggle:hover {
	background: transparent !important;
}

.navbar-toggle .icon-bar {
	transition: all 0.3s;
}

//* ANIMATED X */
.navbar-toggle.x .icon-bar:nth-of-type(1) {
	transform: rotate(45deg);
	transform-origin: 10% 10%;
}

.navbar-toggle.x .icon-bar:nth-of-type(2) {
	opacity: 0;
	filter: alpha(opacity=0);
}

.navbar-toggle.x .icon-bar:nth-of-type(3) {
	transform: rotate(-45deg);
	transform-origin: 10% 90%;
}

/* ANIMATED X COLLAPSED */
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
	transform: rotate(0);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
	opacity: 1;
	filter: alpha(opacity=100);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
	transform: rotate(0);
}
/* END ANIMATED X */