2

Tengo en el header un menú donde los usuarios se loguean o registran en la web (entorno Wordpress) haciendo click en el enlace "Entra o Regístrate". Justo a la izquierda de este texto, hay un icono de usuario de FontAwesome.

Lo que necesito ahora es que cuando la pantalla esté por debajo de 1025px de ancho, el icono de usuario se mantenga, pero el texto "Entra o Regístrate" desaparezca, de tal forma que un click en el icono, acceda al contenido de la página. Lo he intentado hacer, pero en lugar de ocultarse sólo el texto, también lo hace el icono.

¿Cómo podría ocultar sólo el texto cuando esté por debajo de 1025px?

Le indico a continuación el código que tengo relacionado con este menú de "Entra o Regístrate" registrado hasta ahora:

body {
  background:#ccc;
}

.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;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

Hay más estilos definidos, pero he pasado la línea más relevante.

2 respuestas 2

3

Una opción sería reducir el tamaño del texto del enlace a 0, mientras mantienes el texto del ::before a algo diferente (no podrás usar em porque se basaría en 0, pero podrías usar rem o un valor en px directamente: 14px * 1.125 = 15.75px ~ 16px).

Un par de ventajas de usar este método: no requiere ningún cambio en tu HTML, y es más accesible (si escondes el texto usando display:none, los lectores de pantalla lo ignorarán, mientras que con un tamaño de 0, lo seguirán leyendo aunque no sea visible).

Algo como esto (dale al enlace de "Página completa" para poder ver cómo el texto aparece/desaparece conforme cambias el tamaño de la ventana):

body {
  background:#ccc;
}

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

@media all and (max-width:720px) {
  .login-nav ul #menu-item-162 a {
    font-size: 0;
  }
  
  .login-nav ul #menu-item-162 a::before {
    font-size: 1.125rem;
  }
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

2
  • Esta es la mejor solución, sin duda. Commented el 18 sept. 2018 a las 20:48
  • @Alvaro Montoro Fue todo perfecto. Muchísimas gracias
    – fernanf
    Commented el 21 sept. 2018 a las 16:36
0

El tema está en que incluyes el icono por css en un before. Entonces si metes un display:none al enlace, deja de estar activo el enlace del before, y por eso desaparece el icono y no muestra nada.

Prueba a quitar el content: del before e incluir el icono y el texto de otra manera: Siendo el HTML:

<a href="http://localhost/Cover/login/">
  <i class="fas fa-user-circle"></i>
  <span>Entra o Regístrate</span>
</a>

Y siendo el CSS:

@media (max-width: 1024px){
  .login-nav #menu-login #menu-item-162 a span{
    display:none;
  }
}

Y ya nos dices si te funciona. (No olvides hacer copias de seguridad de los ficheros por si esto no funcionase, buscamos otro camino.)

1
  • Si bien es correcta tu respuesta, lo cierto es que si posible hacer el cambio sin tener que cambiar el html, como responde correctamente @Alvaro. Commented el 19 sept. 2018 a las 14:53

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.