Cómo dejar fija la cabecera en mi sitio web

tribunaram

Lambda

Redactor

• 15 Ene 2016

• #1

Quiero dejar la zona donde tengo los iconos de redes sociales y buscador fijos cuando la página corra hacia abajo.
¿Cómo lo puedo hacer?



Gracias

Mi blog:
ViajarSinBillete.com

 

darkdraco

Dseda

Programador

Verificación en dos pasos activada

• 15 Ene 2016

• #2

Agrega esto:

position: fixed;
width: 100%;
top: -1%;


En esta parte:
<div class="topbar-wrapper" >
<header class="header2">

osea así:
<div class="topbar-wrapper" style="position: fixed;width: 100%;top: -1%;" >
<header class="header2">

- - - Actualizado - - -

Después modificas esta parte:

<div id="outer-wrapper" >

así:
<div id="outer-wrapper" style="position: relative;top: 80px;">

- - - Actualizado - - -

También esta parte:

<footer <footer class="animated fadeInUpBig navplace" id="footer-wrapper" itemscope="itemscope" itemtype="http://schema.org/WPFooter" role="contentinfo">

así:
<footer <footer class="animated fadeInUpBig navplace" id="footer-wrapper" itemscope="itemscope" itemtype="http://schema.org/WPFooter" role="contentinfo" style="top: 80px;position: relative;">

- - - Actualizado - - -

También puedes modificar tu css agregando estas lineas:

.topbar-wrapper{
position: fixed;
width: 100%;
top: -1%;
}

#outer-wrapper{
position: relative;
top: 80px;
}

#footer-wrapper{
top: 80px;
position: relative;
}

Cualquiera de las 2 formas te funciona.

 

L

lucasm

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Ene 2016

• #3

Añade esto a tu hoja de estilos.

HTML:

.topbar-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}

body {
   margin-top: 74px;
}

 

Última edición: 15 Ene 2016

tribunaram

Lambda

Redactor

• 16 Ene 2016

• #4

Gracias por la información, pero me queda descuadrado. Se queda medio fijo, perdiendo la mitad de la imagen

 

Soleguia

Beta

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 16 Ene 2016

• #5

¡Buenas!

¿Qué quieres decir con medio fijo? ¿qué parte de la imagen pierdes? si puedes poner una captura quería más claro.

Con todo te diría que al #outer-wrapper le elimines el margin-top: 10px; que tiene y al topbar-wrapper le des un padding-top: 10px;

Un saludo.

 

L

lucasm

Gamma

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 16 Ene 2016

• #6

tribunaram dijo:

Gracias por la información, pero me queda descuadrado. Se queda medio fijo, perdiendo la mitad de la imagen

Hacer clic para expandir...

¿Hiciste lo que te dije?

 

tribunaram

Lambda

Redactor

• 17 Ene 2016

• #7

si pero no se quedaba y además salía descuadrada

 

K

KamoSylla

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 17 Ene 2016

• #8

lucasm dijo:

Añade esto a tu hoja de estilos.

HTML:

.topbar-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}

body {
   margin-top: 74px;
}

Hacer clic para expandir...

Esta bien,lo que dice el compañero pero te recomiendo que utilices la propiedad z-index con un valor de 100,por ejemplo.

 

tribunaram

Lambda

Redactor

• 18 Ene 2016

• #9

KamoSylla dijo:

Esta bien,lo que dice el compañero pero te recomiendo que utilices la propiedad z-index con un valor de 100,por ejemplo.

Hacer clic para expandir...

Y el cambio que hace?

- - - Actualizado - - -

lucasm dijo:

¿Hiciste lo que te dije?

Hacer clic para expandir...

Nada amigo, que no!!!
Donde pongo el codigo? A ver si es que me equivoco?

 

E

elii01

Delta

Programador

Verificación en dos pasos activada

• 21 Ene 2016

• #10

[MENTION=18462]tribunaram[/MENTION]

.topbar-wrapper{position: fixed!important;width:100%;}

Eso es todo 🙂