[Resuelto] CSS para modificar el top bar en versión movil  

Hola Ruth.

Puedes subir lo iconos ya que se muestran bajo del logo y el menu, el problema que veo es que no cabe todo, la dirección y los iconos:

@media only screen and (max-width: 780px) {
.header-top-bar-area.col-xs-fit.area-right {
position: absolute;
}
}

Otra opción podría ser esto:

@media only screen and (max-width: 780px) {
.header-top-bar-area {
position: absolute;
}
.top-bar-social-icons {
margin-left: 10em;
}
}

Un saludo

Hola @pepesoler,

He probado los dos códigos y en ambos casos sale mal. En el primero se solapan la dirección y la barra de iconos y en la segunda, la barra de iconos se mete como en una especia de interlineado (es decir, entre los dos renglones de texto de información que hay en la barra superior). Además, siempre tengo que incluir el código que metí yo porque si no directamente ni se ve.

No sé si hay alguna otra opción que no sea prescindir de uno de los campos para que se vea responsive. Y en caso de tener que prescindir, prefiero que no se vea en la versión movil los datos de contacto, pero sí las redes sociales.

Gracias de antemano.

Hola Ruth,

En este caso verifica si el siguiente codigo CSS te permite posicionar los elementos como deseas

@media only screen and (max-width: 780px) {
.header-top-bar-inner {
height: 80px;
}
.header-top-bar-area {
position: absolute;
}
.header-top-bar-area.col-xs.area-left {
margin-top: -7px;
}
.top-bar-field {
padding: 10px 6px;
}
.header-top-bar-area.col-xs-fit.area-right {
margin-top: 2em;
margin-left: 46%;
}
}

Verifica esto y nos comentas como ha ido todo

Un Saludo

Hola @karen,

Pues exáctamente con ese código no, pero modificándolo un poco he conseguido lo que buscaba.

Muchas gracias.

El  código en cuestión es:

@media ( max-width: 850px ) {
.header-top-bar {
display: inherit;
}
}

@media only screen and (max-width: 780px) {
.header-top-bar-inner {
height: 80px;
}

.header-top-bar-area.col-xs.area-left {
margin-top: -5px;
margin-left:2%
}
.top-bar-field {
padding: 1px 6px;
}
.header-top-bar-area.col-xs-fit.area-right {
margin-top: 0em;
margin-left: 20%;
}
}

Hola Ruth, 

Enhorabuena has logrado modificar lo que necesitas, es un place siempre poder ayudarte. 

Con esto podemos dar el tema como solucionado, escríbenos si tienes cualquier otra consulta

Un Saludo 😊