{"id":230,"date":"2022-11-01T13:00:47","date_gmt":"2022-11-01T13:00:47","guid":{"rendered":"https:\/\/blog.hostinger.io\/es\/support\/2022\/11\/01\/6463972-hostinger-creador-de-sitios-web-como-personalizar-el-estilo-del-menu-de-navegacion\/"},"modified":"2025-08-26T21:51:30","modified_gmt":"2025-08-26T21:51:30","slug":"6463972-hostinger-creador-de-sitios-web-como-personalizar-el-estilo-del-menu-de-navegacion","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/es\/support\/6463972-hostinger-creador-de-sitios-web-como-personalizar-el-estilo-del-menu-de-navegacion\/","title":{"rendered":"Hostinger Creador de Sitios Web: C\u00f3mo Personalizar el Estilo del Men\u00fa de Navegaci\u00f3n"},"content":{"rendered":"<p class=\"no-margin\">Un encabezado es la secci&oacute;n superior de tu sitio web. Se llama barra de men&uacute; o barra de navegaci&oacute;n tambi&eacute;n, ya que suele incluir enlaces a las p&aacute;ginas, secciones u otros elementos. <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>NOTA<\/b>: Si no ves la secci&oacute;n del encabezado, es probable que todas las p&aacute;ginas est&eacute;n <b><a href=\"\/es\/support\/6456821-creador-de-sitios-web-como-ocultar-una-pagina-del-menu-de-navegacion-de-tu-sitio-web\" target=\"_blank\" class=\"intercom-content-link\">ocultas del men&uacute; de la navegaci&oacute;n<\/a> <\/b>&#128161;<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Al hacer clic en la secci&oacute;n del encabezado, aparece un men&uacute; para la configuraci&oacute;n del encabezado:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2022\/11\/1fd37682-c9af-4d6e-bf0e-7afac17617d1.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Hay cuatro opciones principales:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_75aaf978bd\" target=\"_blank\" class=\"intercom-content-link\">Editar cabecera<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_553f54d3f2\" target=\"_blank\" class=\"intercom-content-link\">Editar navegaci&oacute;n<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_98a3110c9e\" target=\"_blank\" class=\"intercom-content-link\">Editar la bolsa de la compra<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_f001a45901\" target=\"_blank\" class=\"intercom-content-link\">Editar estilos<\/a><\/b><\/p>\n<\/li>\n<\/ul><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa;width: 149px\">\n<h2 id=\"h_ebf1faecc9\">Editar cabecera<\/h2>\n<\/td>\n<td>\n<p class=\"no-margin\">Haz clic en <b>Editar cabecera<\/b> para personalizar lo siguiente:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Disposici&oacute;n:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Hacer pegajosa la cabecera<\/b>: de esta forma, la barra de men&uacute; estar&aacute; siempre anclada en la parte superior de la p&aacute;gina y ser&aacute; visible para los usuarios aunque se desplacen hacia abajo en la p&aacute;gina.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Posici&oacute;n del men&uacute;<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Espaciado de los elementos de men&uacute;<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Relleno<\/b>: cambiar el relleno superior\/inferior (altura) de la cabecera.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/es\/support\/6435805-website-builder-logo\" target=\"_blank\" class=\"intercom-content-link\">Logotipo<\/a> <\/b>&ndash; mostrar, ocultar o sustituir el logotipo; cambiar su tama&ntilde;o y posici&oacute;n.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Estilo <\/b>&ndash; cambia el estilo del <b>encabezado <\/b>o de los <b>iconos sociales<\/b>.<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa;width: 149px\">\n<h2 id=\"h_ef860a6d33\">Editar navegaci&oacute;n<\/h2>\n<\/td>\n<td>\n<p class=\"no-margin\">Haz clic en la secci&oacute;n de cabecera y luego en el icono <b>Editar navegaci&oacute;n<\/b>: se desplegar&aacute; el panel <b><a href=\"\/es\/support\/6435707-website-builder-website-pages-and-navigation\" target=\"_blank\" class=\"intercom-content-link\">P&aacute;ginas y navegaci&oacute;n<\/a><\/b> de la izquierda.<\/p>\n<p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Aqu&iacute; puede a&ntilde;adir, renombrar, ordenar, ocultar o eliminar elementos del men&uacute;.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa;width: 149px\">\n<h2 id=\"h_5ec753a604\">Editar bolsa de la compra<\/h2>\n<\/td>\n<td>\n<p class=\"no-margin\">Haz clic en la secci&oacute;n de cabecera y, a continuaci&oacute;n, en el icono <b><a href=\"\/es\/support\/6539042-website-builder-shopping-bag-settings\" target=\"_blank\" class=\"intercom-content-link\">bolsa de la compra<\/a> <\/b>.<\/p>\n<p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Aqu&iacute; puede activar o desactivar la bolsa de la compra, as&iacute; como cambiar su t&iacute;tulo y tama&ntilde;o.<\/p>\n<p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>NOTA<\/b>: Esta opci&oacute;n s&oacute;lo es visible despu&eacute;s de <b><a href=\"\/es\/support\/6538318-website-builder-how-to-enable-e-commerce-features-on-your-website\" target=\"_blank\" class=\"intercom-content-link\">habilitar la plataforma de comercio electr&oacute;nico<\/a><\/b> en su sitio.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa;width: 149px\">\n<h2 id=\"h_bd95aa3ed9\">Editar estilos<\/h2>\n<\/td>\n<td>\n<p class=\"no-margin\">Aqu&iacute; puedes cambiar el estilo de lo siguiente (elige en el desplegable):<\/p>\n<p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>Cabecera<\/b>:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Cabecera <b>color de fondo<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Cabecera transparente<\/b>: si haces que la cabecera sea transparente, hereda el fondo de la secci&oacute;n inferior.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Texto<\/b> <b>font<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Color del texto<\/b>: puede establecer dos colores: normal y flotante.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Para cambiar el <b>tama&ntilde;o de texto<\/b> de la cabecera, ve a la <b><a href=\"\/es\/support\/6463286-website-builder-how-to-change-text-style\" target=\"_blank\" class=\"intercom-content-link\">configuraci&oacute;n global del estilo de texto<\/a> &#128161; <\/b>.<\/p>\n<\/li>\n<\/ul>\n<p class=\"no-margin\"><b>Iconos sociales<\/b>:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">El<b> bot&oacute;n de alternancia<\/b> para activar los iconos de redes sociales en la cabecera<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>A&ntilde;ade nuevos enlaces<\/b> a tus perfiles en varias plataformas de redes sociales.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Tama&ntilde;o del icono<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Color del icono<\/b>: puede establecer dos colores: normal y flotante.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">M&aacute;s informaci&oacute;n: <b><a href=\"\/es\/support\/6474611-website-builder-how-to-add-social-media-icons#h_a85fc59fea\" target=\"_blank\" class=\"intercom-content-link\">C&oacute;mo a&ntilde;adir iconos de redes sociales<\/a> &#128161;<\/b><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><p class=\"no-margin\">&iexcl;&iexcl;&iexcl;Y ya est&aacute;!!! Ahora ya sabes c&oacute;mo personalizar el aspecto de la secci&oacute;n de cabecera de tu sitio web &#128522;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed te ense\u00f1amos c\u00f3mo personalizar el encabezado de tu sitio web<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[257],"tags":[],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-diseno"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463972-hostinger-website-builder-how-to-edit-the-header-section\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463972-hostinger-creador-de-sitios-web-como-personalizar-el-estilo-del-menu-de-navegacion\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463972-createur-de-sites-web-comment-personnaliser-le-style-du-menu-de-navigation-chez-hostinger\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463972-hostinger-svetainiu-kurimo-irankis-meniu-juostos-stilius\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6463972-hostinger-criador-de-sites-como-personalizar-o-menu-de-navegacao\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":2730,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/230\/revisions\/2730"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}