2. Si ya tiene configurada una configuración de menú de navegación personalizada, deberá envolverla en un div con la ID
navigationbarcomo<div id="navigationbar">
... Navigation goes here ...
</div>
3. Vaya a Plantilla> Editar HTML y arriba
]]> </b:skin>agregue el siguiente código:/* START XOMISSE FIXED NAV BAR */
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
/* END XOMISSE FIXED NAV BAR */
4. Para eliminar la barra de navegación de administración de Blogger, vaya a Diseño> Barra de navegación y apáguelo. Te quedarás con un espacio en blanco. Para eliminar este espacio, vaya a Plantilla> Editar HTML y más arriba
]]> </b:skin>agregue lo siguientebody .navbar { height: 0px; }TUTORIAL 2 - Barra de navegación pegajosa
Si la barra de navegación está debajo de su encabezado y desea que se pegue a la parte superior de la ventana cuando se desplaza más allá, siga este tutorial.
1. Vaya a Plantilla> Personalizar> Avanzado> Agregar CSS y agregue el siguiente código. Cuando agrega CSS al Diseñador de plantillas en Blogger, se coloca antes en su plantilla. Cambia el código de color para adaptarlo al diseño de tu blog. Haga clic en Aplicar al blog.
]]></b:skin>/* START XOMISSE STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END XOMISSE STICKY NAV BAR */
2. A continuación, deberá configurar su navegación. Aquí hay un tutorial que muestra cómo crear y diseñar una barra de navegación básica .
3. Busque el código de su código de navegación, que puede estar en su plantilla o en un gadget. Pega
<sticknav>antes y </sticknav>después.<sticknav>
(code for navigation)
</sticknav>
4. El último paso es agregar una secuencia de comandos para indicar a la barra que se desplace. Para hacer esto, vaya a Diseño> Agregar gadget> HTML / Javascript Gadget y pegue lo siguiente.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>
5. La secuencia de comandos presupone que su encabezado se llama encabezado (vea la línea rosa). Si la navegación es saltar, reemplazar.
var aboveHeight = $('header').outerHeight();
Con lo siguiente, ajuste el valor de la altura de su encabezado.
var aboveHeight = 300;
TUTORIAL 3 - Gadget de páginas fijas
Si está utilizando el gadget de Bloggers Pages, simplemente puede agregar el siguiente código para que quede fijo en la parte superior de la ventana del navegador. Vaya a Plantilla> Editar HTML y agregue este código arriba
]]> </b:skin>#PageList1 { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
El selector que use (# PageList1, # PageList2, .pagelist, etc.) dependerá de su plantilla y de la cantidad de gadgets que haya agregado.
Cómo centrar y diseñar la navegación
Para centrar su navegación, agregue el siguiente código
</b:skin>a Plantilla> Editar HTML. Para más código de estilo revisa este tutorial básico de navegación ./* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
Algunas plantillas pueden necesitar esto en su lugar
/* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline-block; float: none;}
o esto
/* Centre Navigation */
.tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none;} Gap por encima de la navegación
Para eliminar la barra de navegación de Blogger, vaya a Diseño> Barra de navegación y apáguelo. Te quedarás con un espacio en blanco. Para eliminar este espacio, vaya a Plantilla> Editar HTML y más arriba agregue lo siguiente
]]> </b:skin>body .navbar { height: 0px; } .content-inner { padding-top: 0px; }Elementos que pierden estilo / CSS cuando se mueven por encima del encabezado
Ocasionalmente, al colocar ciertos elementos sobre el encabezado se eliminará el CSS asociado. Aquí hay una solución para eso. En la pestaña de diseño, arrastre un poco el encabezado, la navegación y cualquier otro dispositivo. Saltará al segundo nivel, esto no debería afectar la apariencia de tu blog (ya que aparecerá en la parte superior) pero mantendrá el estilo. Esperemos que esta imagen lo explique mejor.
