Hacer clic en logo y en slider para ir a la home

Que tal Francisco,

Al revisar tu sitio he podido determinar de que tu logo en moviles no es que no funcione sino que hay un error en la maquetacion de la cabecera

En la vista de moviles hay un elemento que al parecer queda superpuesto sobre el logo y es por ello que cuando hacen clic no ejecuta ninguna accion

Mas que plantear una solución con CSS lo recomendable es ajustar la maqueta para que no tena elementos superpuestos pese a que no estan visibles

Si estas trabajando con un constructor visual recuerda que puedes usar a tu favor el atributo z-index

https://www.w3schools.com/cssref/pr_pos_z-index.php

Valida y nos comentas

Saludos!

Es posible que sea por haber "forzado" código adicional css? Tiene que ser eso pq antes iba...

Estoy usando una plantilla  y he tocado el css adicional.

Tendrá que ver con este CSS adicional, entiendo:

@media only screen and (max-width: 450px) {
#mySidenav.nav {
margin-top: -5em;
}
.menu-box {
margin-left: 7em;
}
}

Habrá que acotar ancho y alinearlo a la derecha?

Porque veo que pasa igual con el botón register... Igual es aconsejable un css adicional que deje arriba LOGO y REGISTER y acotar el ancho del módulo que soporta las 3 lineas del menú? Si eso no funcionara, siempre podemos dejar en un segundo nivel las 3 lineas del menú.

Hola Francisco

Ese es el único CSS adicional que estas aplicando?

No veo que sea el interfiere en la funcionalidad, tal y como cite en mi respuesta anterior hay un elemento superpuesto sobre el logo lo que impide que funcione el enlace al home

Por favor valida la estructura del menú y si tienes más CSS agregado puedes mostrarnos 

Saludos!

@bruno-vichetti hay todo esto:

@media only screen and (max-width: 450px) {
#mySidenav.nav {
margin-top: -5em;
}
.menu-box {
margin-left: 7em;
}
}
.main-navigation ul li a:hover {
color:#fdc800;
}
a.btn.font-weight-normal.register {
font-weight:100;
font-size: 1rem;
}
a.btn.font-weight-normal.register:hover {
background-color: #fdc800!important;
color: #fefefe!important;
font-weight:100;
}
#topbar .topbar-social-icons i:hover {
color:#fdc800!important;
}
@media (max-width: 600px) {
a.btn.font-weight-normal.register {
float: right;
margin-top: -2.8em;
}
.top_social.d-inline {
float: right;
margin-top: -2.2em;
}
#header i{
font-size: 25px;
text-align:left;
width: 0px;
padding: 25px;
color: #91a5a5;
}
}
.fa, .fas, .far, .fal, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 0;
}
section#header {
background-color: #0c426f;
padding: 15px;
color: white
}
section#topbar {
background-color: #91a5a5;
padding: 5px;
color: white;
}
#topbar i {
color: #ffffff;
font-size: 18px;
}
.main-navigation a {
font-size: 14px;
letter-spacing: 1px;
color: #fff;
}
a.register-btn {
padding: 12px;
border-radius: 6px;
text-transform: none;
font-weight: 600;
background: #fac300;
}
.headerbox i {
color: #fff;
background: #5ba5af;
padding: 13px;
border-radius: 8px;
}

Hola Francisco.

El error es por el siguient ecodigo:

@media only screen and (max-width: 450px) {
#mySidenav.nav {
margin-top: -5em;
}
.menu-box {
margin-left: 7em;
}
}

Lo que puedes hacer es central el logo, por ejemplo prueba con lo siguiente:

@media only screen and (max-width: 780px) {
.custom-logo {
height: auto!important;
width: 150px!important;
}
section#header {
text-align: center;
}
}

Elimina el primer código y prueba con este ultimo.

Un saludo

Muchas gracias, Pepe. Yo creo que así funciona mejor. Al menos, el enlace del logo va (aunque he querido hacerlo más pequeño y he puesto 80px).

Pero no va el botón de register...

Hola Francisco.

Ok ya veo, el problema es la seccion del menu que ocupa todo el espacio y se superpone con los botones.

Elimina lo anterior y prueba con lo siguiente:

@media only screen and (max-width: 780px) {
.custom-logo {
height: auto!important;
width: 80px!important;
}
section#header {
text-align: center;
}
img.custom-logo {
margin-left: -2em;
}
div#mySidenav {
width: fit-content;
margin-top: -4em;
}
.internal-page-header {
width: 80px;
}
}

Un saludo

@pepesoler muchas gracias, Pepe. Ahora parece que sí. Alguna idea para alinearlos? O al ser módulos de distinto tamaño no es fácil y variará según el terminal?

Mil gracias!!

Hola Francisco, 

Entiendo que en este caso quieres alinear el botón del menú y acceder en tu versión móvil, si es así revisa si con el siguiente código CSS logras modificar lo que necesitas. 

@media (max-width: 600px){
#header i {
padding: 0px;
margin-top: 25px;
}
a.btn.font-weight-normal.register {
margin-top: -2.4em;
}
}

Un Saludo  

@karen así se me queda alineado verticalmente logo y register

Yo quiero alinear horizontalmente el menú de la versión móvil, el logo y el register. Si lo ves ahora, no está del todo alineado :S

Gracias!!

Hola Francisco, 

Puedes enviarnos una imagen señalando como deseas alinearlo, de esta forma podemos revisarlo mejor y tener una mejor idea sobre como lo necesitas configurar. 

Un Saludo 

Adjunto imagen 🙂