Меню гамбургер на Bootstrap

211

01 декабря 2018, 13:40

Не могу никак сделать адаптивное меню, чтобы на разрешениях меньше 992px меню открывалось через гамбургер, а меньше чем 768px меню и телефон. Что я только не делал.. Но гамбургер сам делал, а вот по клику ничего не открывалось. Верстаю на bootstrap 4. Проект тренировочный. Уже готов. Вот только решил сделать гамбургер меню. Помогите решить проблему. Пробовал и готовые решения, толку от них нет. Прикрепляю вырезки из макета.

<header id="header"> 
			<nav id="navbar"> 
				<div class="overlay"></div> 
				<div class="container"> 
				<div class="row"> 
					<div class="col-lg-2 col-5 col-sm-5"> 
						<img class="logo" src="img/logo.png" alt="Ëîãîòèï"> 
					</div> 
					<div class="col-lg-7 d-none d-lg-block main-menu"> 
						<ul class="main_menu_list d-flex justify-content-center"> 
							<li class="main_menu_list_item"> 
								<a href="#">Главная</a>      
							</li> 
							<li class="main_menu_list_item"> 
								<a href="about.html">О компании</a>  
							</li> 
							<li class="main_menu_list_item"> 
								<a href="move.html">Недвижимость и переезд</a>  
							</li> 
							<li class="main_menu_list_item"> 
								<a href="contacts.html">Контакты</a>  
							</li> 
						</ul> 
					</div> 
					<div class="tel col-lg-3 d-lg-flex col-sm-5 col-md-4 d-sm-flex d-none align-items-center"> 
						<div class="icon"> 
							<img class="modal1" src="img/phone.png" alt="icon"> 
						</div> 
						<div class="phone"> 
							+7 (495) 12-321-345<br> 
							+7 (495) 12-321-345 
						</div> 
					</div> 
				</div> 
			</div> 
			</nav> 
		</header>