<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> <div class="main-nav"> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-light"> <a href="#" class="left_menu_bar"><img src="img/bar.png" class="img-fluid" alt="menubar" /></a> <a class="navbar-brand" href="#"><img src="img/logo.png" class="img-fluid" alt="logo" /></a> <ul class="login-btn hidden-xs"> <li> <a href="#"><i class="fa fa-search" aria-hidden="true"></i>Search</a> </li> <li> <a class="button arrow">Rückruf anfordern</a> </li> </ul> <a id="configure" class="d-sm-block d-md-none text-right"></a> </nav> </div> </div> <div class="menu_bar hidden-xs" id="configurator-wrap"> <div class="container"> <div class="row"> <div class="col-md-12 menu_custom"> <div class="menu_item"> <ul> <li class="sub-menu-parent" tab-index="0"> <a href="">Leistungen</a> </li> <li class="sub-menu-parent" tab-index="0"> <a href="">Preise</a> </li> <li class="sub-menu-parent" tab-index="0"> <a href="">Ghostwriter & Autoren</a> </li> <li class="sub-menu-parent" tab-index="0"> <a href="">Unternehmen</a> </li> </ul> </div> </div> </div> </div> </div> </header>

/* ========================================================================== Main Nav Css Start ========================================================================== */ .main-nav { padding: 16px 0; border-bottom: 1px solid #f6f6f6; } .main-nav .form-inline { border-radius: 5px; overflow: hidden; } .main-nav .navbar { width: 100%; } .main-nav a.navbar-brand { margin: 0; padding: 0; } .login-btn li { padding: 0 10px; display: inline-block; } .navbar-collapse { justify-content: space-between; } .login-btn li a i { color: #000000; padding-right: 6px; } .login-btn li:nth-last-child(1) { border-right: 0; } .menu_bar { background-color: #fff; } .menu_item { margin: 0 auto; } .menu_custom { text-align: left; //padding: 15px 0; display: flex; justify-content: space-between; align-items: center; } .menu_custom ul li { padding: 0 20px; display: inline-block; } .menu_bar li a { color: #000; font-size: 18px; font-weight: 500; text-transform: uppercase; } .navbar { padding: 0rem; justify-content: space-between; flex-wrap: nowrap; } .navbar a { flex: 0 0 30%; } .navbar a .navbar ul { flex: 0 0 30%; } @media only screen and (max-width: 767px) { .menu_bar { background-color: #fff; position: absolute; top: 85px; width: 100%; z-index: 9; } .menu_custom ul li { display: block; padding: 6px 15px; border-bottom: 1px solid #d7e9f8; } .menu_custom { text-align: left; padding: 0 0; } .menu_custom { display: block; } .navbar-brand img { width: 150px; } #configure::after { font-family: FontAwesome; content: "\f0c9"; font-size: 29px; letter-spacing: 2px; position: absolute; right: 0; font-weight: normal; line-height: 16px; left: auto; margin: 0 auto; top: 18px; color: #000; } .hidden-xs { display: none; } .mor-bnt { padding: 18px 65px; } .upper-footer ul li { padding-top: 10px; } .upper-footer h6 { margin-top: 20px; padding-bottom: 10px; } .main-nav .form-inline { display: none; } /* #configure { right: 35px; position: absolute; top: 0; } */ .navbar-collapse { position: absolute; right: 4px; top: 60px; width: auto; } .menu_item ul li { display: block !important; } }

jQuery(document).ready(function () { //mobile-click// $("#configure").on("click", function (e) { $("#configurator-wrap").toggleClass("hidden-xs"); e.preventDefault(); }); });