<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <script src="https://kit.fontawesome.com/df04d7e3b0.js" crossorigin="anonymous"></script> <nav class="navbar nav1"> <div class="container"> <div class="navbar-header"> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right top-nv text-uppercase"> <li><a href="#"><i class="fas fa-search"></i> Buscar</a></li> <li><a href="#"><i class="fas fa-envelope"></i> Mail</a></li> <li><a href="#"><i class="fas fa-video"></i> Webcams</a></li> <li><a href="#"><i class="fas fa-cloud-sun"></i> Meteorologia</a></li> <li><a href="#">Español</a></li> </ul> </div> </div> </nav> <div class="navbar navbar-inverse nav2" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="img/logo-puerto-santander.png" class="logo-desktop hidden-xs hidden-sm" alt="Puerto Santander"> <img src="img/logo-puerto-santander-mobile.png" class="logo-mobile visible-xs visible-sm" alt="Puerto Santander"> </a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar2"> <span class="sr-only">Toggle navigation</span> <i class="fas fa-bars"></i> </button> </div> <div class="collapse navbar-collapse" id="myNavbar2"> <ul class="nav navbar-nav navbar-right cust-nav text-uppercase "> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Multi manager</a></li> <li><a href="#">Asset manager</a></li> <li><a href="#">International</a></li> <li><a href="#">News & Insights</a></li> <div class="hd hidden-md"></div> </ul> </div> </div> </div>

.navbar { position: unset; min-height: 0; margin-bottom: 0; border: 0; border-radius: 0; } .navbar-header { border-bottom: 1px solid #efefef; } .navbar-brand { position: absolute; } .navbar-nav>li>a { text-transform: capitalize; } .nav2 { background-color: #0078C6; } .navbar-inverse ul.cust-nav a { color: #ffffff; padding: 40px 10px; } .navbar-inverse ul.cust-nav ul.dropdown-menu a { background-color: #0078C6; padding: 20px; } .navbar-inverse ul.top-nv { background-color: #ffffff; border-bottom: 1px solid #eeeeee; } .navbar-inverse ul.top-nv a { color: #0078C6; } .navbar-inverse ul.top-nv a:hover { color: #000000; } .logo-desktop { background-color: #ffffff; padding: 20px; margin-top: -40px; box-shadow: 0 0 5px #0000003d; } .logo-mobile { background-color: #ffffff; padding: 10px; } @media (max-width: 1000px) { .nav2 { background-color: #ffffff; } .navbar-inverse ul.cust-nav { background-color: #0078c6; } .navbar-header { background-color: #ffffff; } .navbar-brand { height: auto; padding: 0; font-size: 18px; } .navbar-inverse .navbar-toggle { margin: 0; color: #ffffff; background-color: #0078C6; font-size: 20px; padding: 20px 25px; border-radius: 0; border: 0; min-width: 70px; } .navbar-inverse .navbar-toggle i:before { content: '\f00d'; } .navbar-inverse .navbar-toggle i { -webkit-transition: all 0.3s; transition: all 0.3s; } .navbar-inverse .navbar-toggle.collapsed i { transform: rotate(180deg); } .navbar-inverse .navbar-toggle.collapsed i:before { content: '\f0c9'; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: #0078C6; } .navbar-inverse.nav2 .navbar-nav>li>a { padding: 15px; } }

$('#myNavbar2').on('show.bs.collapse', function () { $(this).append($('#myNavbar').html()); $('#myNavbar2 ul').last().addClass('navbar navbar-nav'); }); $('#myNavbar2').on('hidden.bs.collapse', function () { $('#myNavbar2 ul:last-child').remove(); }); $(window).on('resize', function () { if (window.innerWidth > 768) { $('#myNavbar2').collapse('hide'); } });