Buenos dias tengo la siguiente cabecera
/*PERSONALIZACION DE LA BARRA DE NAVEGACION*/
.mvertical{
display: none;
}
@media screen and (max-width: 900px) {
.mvertical{
display: block;
}
}
@media screen and (min-width: 900px) {
.navegacion{
display: block;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header class="site-navbar py-1" role="banner">
<div class="container col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="row align-items-center">
<div class="col-lg-4 col-xl-4 col-md-4 col-sm-4 col-4 icono">
<p class="mb-0 h2"><a href="index.php" class="text-black mb-0"><img src="https://es.freelogodesign.org/Content/img/logo-ex-7.png">Cabecera de prueba</a></p>
</div>
<div class="col-lg-6 col-xl-6 col-md-6 col-sm-6 col-6 navegacion">
<nav class="site-navigation position-relative text-right text-lg-center" role="navigation">
<ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
<li><a href="index.php">Inicio</a></li>
<li><a href="#horarios">Horario</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#alquiler">Presupuestos</a></li>
<li><a href="#flota">Nuestra Flota</a></li>
<li><a href="sugerencias.php">Sugerencias</a></li>
<li><a href="">Noticias</a></li>
</ul>
</nav>
</div>
<div class="dropdown col-md-2 col-sm-2 col-2 mvertical">
<button type="button" class="fa icon-bars" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="index.php">Inicio</a>
<a class="dropdown-item" href="#horarios">Horario</a>
<a class="dropdown-item" href="#servicios">Servicios</a>
<a class="dropdown-item" href="#alquiler">Presupuestos</a>
<a class="dropdown-item" href="#flota">Nuestra Flota</a>
<a class="dropdown-item" href="sugerencias.php">Sugerencias</a>
<a class="dropdown-item" href="">Noticias</a>
</div>
</div>
</div>
</div>
</header>
El caso es que quiero que cuando desaparezca el menú normal cuando "no coja" en la pantalla se oculte y se muestre el dropdown menu a la derecha del todo, el caso es que aun cuando voy reduciendo la pantalla el ratio de aspecto de la imagen y de las letras "cabecera de prueba" se mantiene, yo quiero que se vaya reduciendo hasta los 800px mas o menos y entoces ya me oculte el menu normal y me muestre el menu dropdown pero pegado en la parte derecha espero puedan ayudarme, gracias
Acabo de encontrar un error de los muchos que hay, y es que al hacer display:none cuando hay menos de "X"px me lo oculta pero me mantiene el col-6 cogido por ese div "el del menu normal"
Cabecera al maximo de pantalla:
Cabecera hasta los 900px de pantalla:
Cabecera desde 900px hasta los 640px: Cabecera con menos de 640px:
cols
de boostrap que está usando. Si pudieras facilitar una imagen del resultado esperado sería de mucha ayuda.