Cómo quitar el menú principal de una URL concreta de tu web

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.

 

quitar menu principal landing

 

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.

quitar menú de landing page

  • 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-873”.

quitar menú de landing page

 

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.

¿Te interesa ser de los primeros en tener mis artículos de SEO, SEM y Social Media en tu email?

¡No esperes más! todas las semanas hay contenido nuevo. Además, recibirás contenidos únicos para suscriptores y algún regalo de vez en cuando

Yo, Roberto Flores González, usaré los datos proporcionados con la única finalidad de gestionar el envío de notificaciones sobre sobre Marketing Digital, Diseño Web, SEO y SEM, siendo la legitimación el consentimiento. Destinatarios: Los datos no se cederán a terceros, salvo obligación legal. Los datos facilitados están ubicados en servidores con sede en la UE o gestionados por entidades acogidas a “Privacy Shield” (MailChimp). Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos.

Te recomiendo leer:

Si crees que este post puede ayudar a alguien, te invito a que lo compartas
[Total:4    Promedio:4.8/5]

Profesional de Marketing Online, especialista en posicionamiento SEO, SEM y diseño Web. Socio certificado de Google. Inquieto por naturaleza y aprendiendo constantemente nuevas técnicas. Colaboro y ayudo a empresas y profesionales a conseguir mayor visibilidad en internet. Consultor de Marketing Online Freelance.

13 comentarios en “Cómo quitar el menú principal de una URL concreta de tu web

  1. 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!!

  2. 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 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!!

  3. Hola buenas, no se mucho sobre programación, tengo una petición. Como puedo hacer para quitar la cabecera principal de mi Home en las páginas sucesivas que haga. Es decir, yo tengo una cabecera en mi página princial, y cuando alguien pinche en saber más entran dentro de otra página…Porque no puedo quitar la cabecera princial cuando entren en otra página ?? http://www.mundo-bebe.com al entrar verás que si pinchas en carritos te habre otra página pero la cabecera sigue. Como la quito.

    • Hola Victor, esto dependerá de la plantilla que estés usando. Puede que la solución este cuando le das a editar cada página que te permita usar distintas plantillas. Normalmente, a la derecha, debajo de publicar hay una opción que se llama atributos de página. Aquí podrás decidir si esa página tiene una página superior y también podrás decidir la plantilla.

      Así todo, como te estoy diciendo dependerá mucho del tema que estés usando.

      Un saludo,
      Roberto

  4. 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!!

  5. 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!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Centro de preferencias de privacidad

cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas.

gpdr

cookies de terceros

Son cookies de Google usadas para conocer tus usos de navegación.

_ga, _gid, _gat