0

Estoy trabajando en el header de mi proyecto web (Wordpress) incluyendo un icono que al hacer clic sobre él, enlace con la página de login/registro de usuario. La cuestión es que cuando trabajo en modo responsive y ubico este icono en medio del header, cuando hago clic en el icono, no responde y no enlaza a la página de login/registro. Puesto que en medio del header hay alineados más elementos (logo, otro menú), pudiera ser que este icono interactúe de alguna forma con estos elementos y no responda (aunque visualmente no están superpuestos, obviamente), ya que si lo muevo a cualquier ubicación pegada al borde de header, funciona correctamente.

Tan sólo si me pudieran ayudar para que el icono pueda enlazar a la página de login/registro en la ubicación indicada.

A continuación muestro el código html y css que he aplicado:

html y css:

<div class="top-header">
<div class="login-nav">
<ul id="menu-login" class="nolmp">
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-162">
<a href="http://localhost/Cover/login/">Entra o Regístrate</a>
</li>
</ul>
</div>
</div>


@media (max-width: 1024px)
.top-header {
position: relative;}

.top-header {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
float: left;
width: 100%;}

.top-header, .bottom-header {
padding: 0 20px; }


@media (max-width: 1024px)
.login-nav ul {
margin: 0px 0 0;
float: left;
padding-left: 40px;}

@media (max-width: 1024px)
.login-nav ul li {
position: absolute;
top: 30%;}

@media (max-width: 1024px)
.login-nav ul #menu-item-162 a {
font-size: 0;}

@media (max-width: 1024px)
.login-nav ul #menu-item-162 a::before {
font-size: 1.125rem;}

.login-nav ul #menu-item-162 :before {
content: "\f2bd";
font: normal normal normal 14px/1 FontAwesome;
font-size: 1.125em;
vertical-align: middle;
padding: 0 5px;
color: #fff;} 

1 respuesta 1

0

prueba a sustituir en el CSS esto:

.login-nav ul #menu-item-162 :before

por esto:

.login-nav ul #menu-item-162 a:before

Es que el icono estaba fuera del enlace en cuanto a HTML se refiere.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.