Seguro que muchas veces has visto landing pages sin menú principal. En realidad, es lo óptimo ya que así evitas distracciones en los usuarios con el objetivo de conseguir las máximas conversiones posibles.
Sin embargo, la mayoría de plantillas no dan la opción para poder quitar el menú principal en la página que deseas. Por lo que te ves obligado a tocar el CSS para poder conseguirlo.
Además, si utilizas algún page builder para crear tu landing te puede generar ciertos problemas. Por ejemplo, al crear una landing con elementor page builder, he tenido un problema al seleccionar las opciones que te eliminan el menú principal. Y es que no solo eliminaba el menú principal, sino que quitaba el header y el footer. Por lo que si tienes, por ejemplo, instalado el código de seguimiento de Anlytics en estos archivos, no conseguirá leer ningún dato.
Esta es la razón por la que me he visto obligado en investigar cómo crear una landing eliminando el menú principal. Así que no voy a enrollarme más. Vamos con los pasos que hay que dar para quitar el menú principal de una URL concreta.
Pasos para quitar el menú principal de tus landing page
Paso 1. Ver cuál es la id de tu landing page
Para esto, os voy a ilustrar con alguna imagen para que no os perdáis.
Abrimos el inspector de elementos
Para abrir el inspector de elementos bastará con pulsar el botón secundario y dar a inspeccionar. Aparecerá una ventana como la que está recuadrada en rojo.
Comprobamos cuál es la id de la landing page
Como puedes comprobar, el inspector está dividido en dos. En el lado izquierdo aparece el código html y en el derecho el código CSS.
Nos tenemos que situar en el lado izquierdo e ir al principio del todo. Ahí debemos fijarnos en donde pone page-id. En este caso la id de mi landing page es “page-id-4679”.
Paso 2. Eliminar el menú principal solo de tu landing page mediante CSS
Para tocar los CSS de mi web uso y recomiendo usar SiteOrigin CSS ya que me parece un plugin muy completo y liviano. Personalmente me gusta mucho. Por eso es uno de los componentes de mi lista de mejores plugins para WordPress.
Ahora debemos insertar el siguiente código en nuestro editor CSS;
body.page-id-873 #main-nav { display: none; }En mi caso pone page-id-873 que es la id de mi landing page. En el vuestro debéis poner la id de vuestra landing.
Con esto, conseguiremos eliminar el menú principal de nuestra landing page. Además, seguiremos teniendo constancia de los movimientos de nuestros visitantes a través de analytics ya que sigue existiendo el header y el footer en nuestra landing.
En este caso no he encontrado ninguna solución en internet. En el soporte de WordPress, el creador de Elementor recomendaba usar un plugin para solucionar el problema. Elementor es una gran herramienta. Es uno de los plugins que recomiendo en el post de mejores plugins, y no quería dejar de usarla por este problema. Por lo que me ha tocado investigar, y al final he dado con la manera de hacerlo sin usar de plugins adicionales. Si se puede hacer sin plugins, mejor. Espero que os haya ayudado a solucionar el problema y si tenéis alguna duda os invito a que me preguntéis en los comentarios o que os pongáis en contacto a través de mail. Estoy deseando poder ayudaros.
42 comentarios en «Cómo quitar el menú principal de una página web hecha con WordPress»
Buen día Roberto, seguí las instrucciones pero no conseguí desaperecer el menú
1. Instalé el plugin SiteOrigin CSS
2. Obtuve el id de mi landing page
3. Copié tu código sustituyendo el número de ID
Usando el plugin SiteOrigin css, probablemente puedas ocultarlo sin necesidad de usar mi código. Es decir, una vez dentro del plugin, si pinchas en el ojo que parece en la parte superior derecha de la caja donde has metido el código, seleccionando el menú y usando las opciones que te ofrece el plugin.
Así todo, me parece raro que no te funcione. Si quieres ponte en contacto conmigo por mail y lo miramos mañana en un momento.
Un saludo!!
Hola Roberto, a mi tampoco me funciona.
No entendí la espuesta que le diste a Ivan, dices que no es necesario usar tu código pero luego dices -en la caja donde has metido el código-.
Saludos.
Hola Ed, le he contestado -en la caja donde has metido el código- porque me ha dicho que ha metido mi código con el plugin site origin. Sin embargo le aclaro a Iván es que si estas usando el plugin site Origin CSS, igual no es necesario usar mi código ya que el plugin posee un editor visual. Por lo que haciendo uso de este editor visual al que se accede desde el icono con forma de ojo que está en la parte superior derecha de su pantalla (esto es a lo que le estaba haciendo referencia a Iván, en dónde se sitúa el icono) puedes cambiar todo lo que desees y el propio plugin te añade el código necesario.
Si necesitas ayuda, te recomiendo que te pongas en contacto conmigo. Puede que el código que aquí facilito pueda variar ligeramente de una plantilla a otra ya que cabe la posibilidad de que la sección a la que corresponde el menú la llame de otra forma.
Un saludo!!
Hola buenas Roberto, ¿sabrías como hacer lo mismo pero con el footer de una página en concreto pero que en las demás funcione?
Hola Pepe!!
Sería hacer el mismo proceso, es decir usar CSS y el id de la página para la que quieres quitarlo. Para esto necesitaría saber cuál es tu web para ver como llama al footer y usar el comando display:none; que sirve para ocultar visualmente el elemento.
Un saludo!!
Hola Roberto, yo tampoco consigo quitarle el menu a una pagina en concreto que quiero utilizar para una campaña y no quiero que haya distracciones de nada. He agregado el plugin, localizado el id y tambien puse tu codigo porque lo que dices de mirarlo en el ojo, no consigo saber como hacerlo. Me da la sensación que el problema está en el nombre que pones del menu no? (#main-nav) o eso es igual para todas las páginas? donde puedo mirar el nombre que utiliza mi plantilla? yo uso DIVI
Muchas gracias!
Claro Laura, si en tu web el menú tiene otro nombre tendremos que poner ese mismo nombre.
Prueba con .site-header.
De todas formas puedes mirarlo con el inspector de elementos de chrome. pinchas en el icono de cursor que hay en la esquina superior izquierda y seleccionas el menú. Fíjate que esté todo el menú seleccionado y no solo la parte del logo y y los botones. Una vez que tengas seleccionada la barra del menú, en el inspector de elementos, tendrás una línea subrayada de azul. Ahí tienes que mirar en donde pone class=»…» y en donde he colocado los puntos es como se llama el menú de tu web.
Si tienes cualquier problema no dudes en contactar conmigo. A veces estas cosas de la programación se complican.
Un saludo!!
puff no lo consigo. he puesto esto y nada. y antes de poner esto me salia el class pero sin nada dentro y ahora ni siquiera sale! Te mando el link de la página que quiero que no se vea el menu por privado para ver si estoy poniendo bien el nombre del menu. La página no está subida al menu pero está publicada porque estoy haciendo pruebas.
body.page-id-1268 #main-header{
display: none;
}
Mil gracias!
Excelente, el truco es detectar los Id y entender la sintaxis del CSS, gracias por tu importante aporte
Gracias Juan, me alegro de que te haya servido.
Un saludo!!
Sin palabras Roberto, nos has solucionado un comecocos.
¡Gracias!
Gracias a ti por comentar!! 😉
hola, no logro hacer que funcione el editor de css…que debo poner una vez posicionada en el elemento?: visibilidad: oculto?.
Trate de hacer eso y se me desapareció todo de todas las paginas!!
Gracias por tu respuesta!
Hola Analia, eso dependerá de tu web. Primero te recomiendo que lo hagas directamente desde la consola de Chrome tal y como explico en el post. Abres la consola, mira primero el id de la página en la que quieres quitar el menú y después selecciona el menú con la herramienta de selección que te da la consola de Chrome.
Una vez hecho esto, deberás saber como llama tu web a tu barra de menú y realizar los cambios en el editor de css de WordPress.
Si no eres capaz, siempre puedes escribirme a rober@roberflores.com y veremos como te puedo ayudar a conseguir tu objetivo.
Un saludo!!
Rober, mil gracias por este valioso aporte. Ahora puedo hacer mis landing page en mi dentro mi instalación de Wordpress.
Me alegro de que te sirva de ayuda Elena.
Un saludo!! 😉
Estimado Rober:
Te cuento lo que hice. Cuando aplico el CSS que me da el plugin de CSS SiteOrigin, éste me aplica los cambios a todo el sitio web. Y realmente yo lo quiero hacer en una página en concreto. No supe cómo ponerlo para que afectara solo un post o página.
Entonces hice esto:
Instalé el plugin de CSS SiteOrigin https://ve.wordpress.org/plugins/so-css/ para crear el estilo del post en concreto (borré el menú, el cabecero, el footer, el título. Mi intención es tener la página limpia para crear una landing page). Copié el código CSS que me generó. ATENCIÓN: No le hice clic en guardar porque me aplicaba a toda la web.
Copié el código y lo pegué en la página en concreto que quería modificar.
Lo inserté de la siguiente manera:
Instalé el plugin WP Add Custom CSS https://wordpress.org/plugins/wp-add-custom-css/
Este plugin crea un nuevo cuadro «CSS personalizado» en el área de edición para agregar CSS personalizado a post y páginas. Y fue en ese cuadro, de esa página/post en concreto, que puse el CSS. Todo salió perfecto.
Realmente no me gusta tener 2 plugins allí para eso, es decir, sé que entre menos plugins en la web, mejor, pero no vi oltra alternativa. Y todo va bien. Espero que la experiencia le pueda servir a alguien. Muchas gracias.
Muchas gracias por contarnos tu experiencia y cómo lo has resuelto Elena.
Un saludo!
Hola Elena!!!!
Bueno es un poco chapucero porque lo he puesto en opacidad 0, en lugar de quitarlo de forma completa, pero me sirve.
Muchas gracias por la aportación.
Gracias también a ti Rober!
Hola Roberto, como quedaría la sintaxis con .site-header porque no logro hacer desaparecer mi cabera ni mi footer y estoy intentando hacer una landing page. Ya tengo el id de la pagina. Gracias
Hola Gabriel, en muchas plantillas existe la opción de poder quitar ambas desde el editor de WordPress. Concretamente en cuando estas en el editor de páginas de Wordpress, en la opción atributos podemos elegir diferentes plantillas. Una de ellas suele ser para eliminar tanto el header como el footer. Si no es posible hacerlo de esta forma, necesitaría saber cuál es tu página web para poder decirte exactamente cómo deberías de hacerlo.
Un saludo!!
Muy buen aporte, lo hice aunque quizás en el post te falta enseñar cómo utilizar el plugin (tuve que buscarlo en otra parte) y luego tuve que modificar algo más el CSS pero logré hacer una landing page sin footer ni menú para que no se vayan a otras páginas de la web. ¡Gracias!
¡Hola Roberto!
El artículo es de mucha ayuda, a mi me ha servido, lo que pasa que me sigue apareciendo el menú al hacer scroll, ¿cómo puedo quitarlo?
Muchas gracias Mari Carmen. Me alegro de que te haya servido el post. Por lo que cuentas, tiene pinta de que tienes que ver cuál es la clase que llama a ese menú que aparece al hacer scroll y hacer exactamente lo mismo que con el anterior. Si necesitas ayuda dime y te lo miro en un momento.
Un saludo!!
Gracias Roberto, me sirvió, efectivamente como menciona un usuario (Juan A. Zequera) es importante saber la sintaxis del CSS.
Agradecido por tu aporte,
Saludos.
Hola Rober. Gracias por el post aunque lo he intentado de varias maneras y con varias etiquetas y no me sale. Quiero sacar la cabecera y el footer de storefront para una página en concreto. Copio aquí el código.
.page-id-109 #storefront-primary-navigation {
display:none;
}
Lo he puesto también con la etiqueta body.
Agur y mil gracias de antemano. 🙂
Hola Álvaro, necesitaría saber cuál es tu web para poder probar y darte una respuesta que te sirva.
Un saludo!!
Hola Roberto,
Excelente, mucha gracias. Me ayudó mucho entender la lógica y aquí muestro como lo ajusté a mi theme Eduma Premium: body.page-id-873 .tm-table {
display: none;
}
Descubrí que a veces hashtag se puede cambiar por el punto. Después en la fase de inspeccionar miré como se llama mi Menu según mi Theme. Así descubrí como tengo que remplazar menu-nav.
Espero mi comentario sirve porque la verdad es que soy muy principiante y eso muestra que todos podemos hacerlo!
Este articulo me ayudo mucho seguir el orden y prolijidad de los cambios. Gracias
Hola Ewe, me alegro mucho que te haya servido de ayuda el post y gracias por aportar tu granito de arena para que la gente lo entienda mejor.
Un saludo,
Rober
Roberto te agradezco mucho, llevaba tiempo buscando el código: body.page-id-45 .site-header {
display: none;
}
lo hice como lo has dicho y me resulto de maravilla en el editor del CSS adicional que trae Wordpress, en este caso hago uso de la plantilla de ASTRA y no conseguía quitarle el header, gracias mil y un millón de veces por tu ayuda.
Hola Dylan, me alegro de que te haya servido 😉
no logre hacerlo. no pasa nada
Hola Anthony si necesitas ayuda, contacta conmigo a través de la página de contacto y vemos tu problema.
Un saludo
Saludos; despues de intentar durante dias, de un modo y de otro, así lo logre
body.page-id-896
.footer-nav-wrap
{
display: none;
}
Eso es porque el menú que estabas intentando quitar estaba en el footer ¿verdad? Al fin y al cabo lo que hay que hacer es eso, buscar la clase CSS, indicar la ID de la página en la que se quiere quitar y meterle un display:none.
Muchas gracias por contar tu experiencia Luis.
Hola, Roberto:
He seguido tus pasos, en principio todo muy bien explicado y sencillo.
Pero no he conseguido el resultado buscado. Vaya, me sigue apariendo el menú, en la sección de mi web en la que quiero ocultarlo.
No sé qué puedo estar haciendo mal.
Como indicas en otro de los comentarios, he buscado el nombre del menú con el inspector de elementos de chrome, pinchando y seleccionando el menú.
Me aparece dentro de la etiqueta , «navigation clearfix» parece ser su nombre.
Pero no funciona con ese (he probado tal cual, separado con guion, separado con punto).
También he probado con «nav-menu.clearfix», ya que me aparece abajo, con la etiqueta , tras la etiqueta , y con «menu-top-menu».
Ademas, escribiendo .page-id (sin «body»).
¿Alguna idea?
¡¡Muchas gracias, un saludo!!
Hola José, prueba con lo del id y lo siguiente:
.navigation.sticky, .navigation.static {
display:none;
}
Espero que te sirva.
Un saludo
Hola, Roberto,
Gracias por tu respuesta y ayuda. Me despisté un poco y no la vi hasta anoche.
He probado tal y como me comentas, pero sigo sin conseguir que el menú desaparezca en esta landing page.
No sé si es que estoy haciendo algo mal.
Te copio las dos formas en las que lo he intentado (sustituyo la id por XXXX):
1.
body.page-id-XXXX #navigation clearfix { display: none; }
.navigation.sticky, .navigation.static {
display:none;
}
2.
body.page-id-XXXX #navigation clearfix
.navigation.sticky, .navigation.static {
display:none;
}
Un saludo.
Y con:
body.page-id-XXXX .navigation.sticky, .navigation.static {
display:none;
}
Prueba a ver porque me parece raro. Si no si quieres ponte en contacto conmigo por privado y te hago un presupuesto para solucionartelo.
Un saludo
Buenos días:
Excelente artículo que he aplicado para retirar elementos de una landing page. Necesitaba quitar el menú de cabecera, el div del logo de cabecera, el footer y el div de botones de redes sociales.
Todos los elementos los he identificado con el inspector de Chrome y retirado con códigos CSS en opciones del tema de DIVI:
/* QUITAR ELEMENTOS EN LANDING PAGE */
body.page-id-3309 #top-header {
display: none;
}
body.page-id-3309 #main-header {
display: none;
}
body.page-id-3309 #top-menu-nav {
display: none;
}
body.page-id-3309 #main-footer {
display: none;
}
body.page-id-3309 div.mashsb-box {
display: none;
}
Muchas gracias y un saludo
Muchas gracias a ti por contarnos cómo lo has conseguido.
¡Un saludo!