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;}