<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="top-line"> <a href="#" class="logo"><img src="http://placehold.it/150x50/dddddd/333333" alt="logo alt"></a> <div class="phone"><i class="fa fa-phone"></i>+777 777 77 77</div> <div class="mobile-menu-btn"><i class="fa fa-bars"></i> Меню</div> <nav class="main-menu top-menu"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

.top-line { background-color: #222; position: relative; height: 60px; } .top-line .logo { padding-left: 25px; left: 0; display: inline-block; position: absolute; line-height: 55px; } .main-menu { padding: 0 130px; width: 100%; text-align: center; } .main-menu ul { list-style-type: none; padding: 0; margin: 0; } .main-menu ul li { display: inline-block; } .main-menu ul li.active a { color: #fff; } .main-menu ul li:hover a { color: #f5f5f5; } .main-menu ul li a { color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 0 15px; line-height: 60px; display: block; transition: color .25s ease, background-color .25s ease; } .mobile-menu-btn { color: #fff; text-align: center; line-height: 65px; font-weight: bold; text-transform: uppercase; display: none; white-space: nowrap; } .mobile-menu { display: none; background-color: #2a2a2a; border-top: #343434; } .mobile-menu .top-menu { display: block; } .mobile-menu .top-menu ul { padding: 0; } .mobile-menu .top-menu ul li { display: block; text-align: center; } .mobile-menu .top-menu ul li:hover { background-color: #343434; } .mobile-menu .top-menu ul li a { padding: 0; line-height: 40px; } .mobile-menu .top-menu ul li a:hover { text-decoration: none; } .phone { position: absolute; padding-right: 25px; padding-left: 10px; right: 0; color: #fff; line-height: 55px; cursor: pointer; transition: color .25s ease; font-size: 24px; } .phone i { padding-right: 10px; font-size: 20px; } @media (max-width: 575.98px) { .top-line .logo { padding-left: 5px; } .top-line .phone { display: none; } .top-line .mobile-menu-btn { padding-right: 5px; display: block; text-align: right; font-size: 20px; line-height: 55px; } .main-menu { padding: 0 30px; } } @media (max-width: 1199.98px) { .main-menu { display: none; } .mobile-menu-btn { display: block; } }

$('.top-line').after('<div class="mobile-menu d-xl-none">'); $('.top-menu').clone().appendTo('.mobile-menu'); $('.mobile-menu-btn').click(function(){ $('.mobile-menu').stop().slideToggle(); });