¿Cómo puedo ocultar la barra de navegación en Squarespace?

Ocultar la barra de navegación en Squarespace puede resultar útil a la hora de diseñar páginas de destino, portafolios u otras secciones de tu sitio web en las que desees conseguir un aspecto minimalista. Aunque Squarespace no ofrece una función integrada para ocultar directamente la barra de navegación, puedes lograrlo mediante CSS personalizado. A continuación encontrarás instrucciones paso a paso para las diferentes versiones de Squarespace.

Pasos para ocultar la barra de navegación en Squarespace 7.1 y 7.0:

1. Cómo acceder al editor de CSS personalizado:

1. Inicia sesión en tu cuenta de Squarespace y ve a la página web en la que quieras ocultar la barra de navegación.
2. Ve al menú de inicio y selecciona «Diseño».
3. Haz clic en «CSS personalizado».

2. Añadir CSS personalizado:

1. En la ventana «CSS personalizado», puedes añadir código CSS para ocultar la barra de navegación. Este es el código básico que puedes utilizar:

css /* Hide the main navigation bar */ .header-nav { display: none; }

1. Si quieres dirigirte a una página concreta, puedes utilizar un identificador de página único. Cada página de Squarespace tiene un identificador único, que puedes encontrar en la URL de la página cuando estás en modo de edición. Por ejemplo: https://yoursite.squarespace.com/config/pages/unique-page-id Si se utiliza el identificador de página oculto, el CSS quedaría así:

css /* Hide the main navigation bar on a specific page */ .page-id-unique-page-id .header-nav { display: none; }

3. Guardar los cambios:

1. Una vez añadido el CSS deseado, haz clic en «Guardar» para aplicar los cambios.
2. Actualiza tu página web para asegurarte de que la barra de navegación esté oculta.

Consideraciones adicionales:

• Variaciones de la plantilla: Las distintas plantillas de Squarespace pueden utilizar clases o identificadores diferentes para los elementos de navegación. Si .header-nav Si no funciona, revisa los elementos de la página (utilizando las herramientas de desarrollo del navegador) para identificar la clase o el ID correctos.

• Navegación móvil: Asegúrate de comprobar tanto la versión para ordenador como la versión móvil de tu sitio web. A veces, ocultar la navegación en la versión para ordenador puede que no afecte a la versión móvil. Es posible que tengas que añadir reglas CSS adicionales para la versión móvil, como por ejemplo: css /* Hide the navigation bar on mobile */ .mobile-nav .header-nav { display: none; }

• Alcance de los cambios: Cuando realices modificaciones en varias páginas o en secciones concretas, recuerda probar los cambios en todas las áreas afectadas para asegurarte de que el estilo funciona según lo previsto y no provoca problemas de maquetación.

Uso de la inyección de código (opcional):

Los usuarios más avanzados también pueden utilizar la función «Inyección de código», disponible en los planes Business o Commerce de Squarespace: 1. Ir a «Inyección de código»: Ve a Configuración > Avanzado > Inyección de código. 2. Añade tu CSS: En la sección correspondiente (encabezado o pie de página), añade tu código CSS, entre etiquetas <style> etiquetas: ```html

``` 3. Guardar los cambios: Haz clic en «Guardar» para aplicar el código que has insertado.

Limitaciones y consideraciones:

• Limitaciones de las funciones: Es posible que los planes gratuitos o personales no tengan acceso a determinadas opciones de personalización avanzadas, como la inyección de código.
• SEO y usabilidad: Ocultar la barra de navegación puede afectar a la experiencia del usuario y al SEO, ya que a los usuarios les puede resultar más difícil navegar por tu sitio web.
• Copia de seguridad: Haz siempre una copia de seguridad de tu CSS personalizado y de los datos de tu sitio web antes de realizar cambios importantes.

Si sigues estos pasos, podrás ocultar eficazmente la barra de navegación en Squarespace, lo que te permitirá crear una página más limpia y centrada que se ajuste a tus objetivos de diseño.