Tiburones del SEO

CSS para headers de Asap Theme

Índice

Aquí vamos a tener los típicos css que utilizamos en nuestro header. Utiliza la tabla de contenido para saltar al que te interesa aplicar.

Todos se aplican para Asap Theme

Eliminar espacio abajo del menú

Este es ideal para cuando tenemos un hero.

/*eliminar espacio bajo menú*/
.site-header {
  margin-bottom: 0px;
}

Si por ejemplo solo lo queremos aplicar en el home:

/*eliminar espacio bajo menú*/
.home .site-header {
  margin-bottom: 0px;
}

Logo a la izquierda + kw de página en texto

Bueno, el título lo dice todo. Lo que haremos con esto cuando NO tenemos logo en Identidad del Sitio, cargamos la imagen del logo y la agregamos a la izquierda del nombre del sitio al que también le hacemos una pequeña modificación. Esto es para meter la KW principal dentro y que no sea en una imagen.

No es un truco ni nada relevante quizás, pero si pensamos que lo primero que se ve al rastrear es eso puede que ayude.

.site-name {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  position: relative;
}

.site-name::before {
  content: "";
  display: inline-block;
  width: 35px;   /* Aumentamos el tamaño del logo */
  height: 35px;
  margin-right: 2px;
  background-image: url('https://tiburonesdelseo.com/wp-content/uploads/2025/06/Tiburones-del-seo.webp');
  background-size: contain;
}

Modificación de enlaces del menú

Este es solo un detalle pero es para resaltar por donde estamos pasando el mouse agrandando la letra y colocar en negritas las fuentes del menu de la cabecera.

/* ENLACES MENÚ */
.menu-item {
	font-weight:bold;
	font-size: 18px;
    letter-spacing: 0.02em;
}
/* ENLACES MENÚ HOVER */
.menu-item:hover a{
    transition: 0.2s;
		font-size: 20px;
}
Subir