HTML - Problema con menú sticky menú

 
Vista:

Problema con menú sticky menú

Publicado por Stefy26 (5 intervenciones) el 28/08/2014 19:11:35
Hola buenas tardes!

He comprado la siguiente template:

http://stability.dan-fisher.com/index-header-4.html

Estoy usando la índex con el header 4, el cual agrega una barra arriba encima del menú con el fondo rojo, con opciones de login y registro, como también de teléfono y email.

Es ese top header que yo quisiera que a la hora de cuando hago scroll con el ratón y el menú normal se desplaza según el movimiento de mi ratón, conjuntamente ese top header lo haga a la par.

Ayer intente cambiar el custom.js y al intentar cambiarlo me lo dejaba todo en estático y el menú dejaba de moverse agregando lo siguiente:

body.sticky-header .header {top:0;}

Sí alguien podría indicarme que parámetro cambiar, estaría enormemente agradecida!

Código en Html:

<!-- Header -->

<header class="header header-top-colored menu-colored">

<div class="header-top">

<div class="container">

<div class="header-top-left">

<span class="info-item"><img src="eng-flag.png" width="16" height="12" alt=""/></i> <a href="#">Ingles</a></span>
<span class="info-item"><img src="fra-flag copia.png" width="16" height="12" alt=""/></i> <a href="#">Portugues</a></span>
<span class="info-item"><img src="ger-flag copia.png" width="16" height="12" alt=""/></i> <a href="#">Español
<span class="info-item"><i class="fa fa-envelope"></i> <a href="mailto:[email protected]">[email protected]</a></span>
</div>
<div class="header-top-right">
<span class="login">
<i class="fa fa-lock"></i> <a href="#"target="_blank">Login</a>
</span>
<span class="register">
<i class="fa fa-pencil-square-o"></i> Aún no eres miembro? <a href="#"target="_blank">Registrate</a>
</div>

</div>
</div>
<div class="header-main">
<div class="container">
<!-- Logo -->
<div class="logo">
<!-- <a href="index.html"><img src="images/logo.png" alt="Stability"></a> -->
<h1><a href="index.html"><img src="images/logo.png" width="200" height="45"/></a></h1>
</div>
<!-- Logo / End -->

<button type="button" class="navbar-toggle">
<i class="fa fa-bars"></i>
</button>

<!-- Navigation -->
<nav class="nav-main">
<ul data-breakpoint="992" class="flexnav">
<li class="active"><a href="index.html">Home</a>

</li>
<li><a href="nosotros.html">Nosotros</a>

</li>
<li><a href="servicios.html">Servicios</a>

</li>
<li><a href="#">Únete</a>
<ul>
<li><a href="colabora.html">Colabora</a></li>
<li><a href="paquetes.html">Paquetes</a></li>

</ul>
</li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="noticias.html">Eventos</a></li>

</ul>
</li>
<li><a href="contacts.html">Contacto</a></li>
</ul>
</nav>
<!-- Navigation / End -->

</div>
</div>

</header>
<!-- Header / End -->

<!-- Main -->
<div class="main" role="main">


Código custom.js :

// Animation on scroll
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile == false) {

$("[data-animation]").each(function() {

var $this = $(this);

$this.addClass("animation");

if(!$("html").hasClass("no-csstransitions") && $(window).width() > 767) {

$this.appear(function() {

var delay = ($this.attr("data-animation-delay") ? $this.attr("data-animation-delay") : 1);

if(delay > 1) $this.css("animation-delay", delay + "ms");
$this.addClass($this.attr("data-animation"));

setTimeout(function() {
$this.addClass("animation-visible");
}, delay);

}, {accX: 0, accY: -170});

} else {

$this.addClass("animation-visible");

}

});
}


/* ----------------------------------------------------------- */
/* 8. Sticky Header
/* ----------------------------------------------------------- */
if($("body").hasClass("boxed"))
return false;

var header = $("header.header"),
headH = header.height(),
logoHolder = header.find(".logo"),
logo = header.find(".logo img"),
logoW = logo.width(),
logoH = logo.height(),
logoSmH = 50,
$this = this;

logo.css("height", logoSmH);

var logoSmW = logo.width();
logo.css("height", "auto").css("width", "auto");

$this.stickyHeader = function() {

if(header.hasClass("header-menu-fullw"))
return false;

if($(window).scrollTop() > (headH) && $(window).width() > 991) {

if($("body").hasClass("sticky-header"))
return false;

logo.stop(true, true);

$("body").addClass("sticky-header").css("padding-top", headH);

logoHolder.addClass("logo-sticky");

logo.animate({
width: logoSmW,
height: logoSmH
}, 300, function() {});

} else {

if($("body").hasClass("sticky-header")) {

$("body").removeClass("sticky-header").css("padding-top", 0);

logoHolder.removeClass("logo-sticky");

logo.animate({
width: logoW,
height: logoH,
}, 300, function() {

logo.css({
width: "auto",
height: "auto"
});

});
}
}
}

$(window).on("scroll", function() {
$this.stickyHeader();
});
$this.stickyHeader();

Y por último el código de la theme.css:

/* Sticky Menu */
body.sticky-header .header {
position: fixed;
top: -44px;
left: 0;
right: 0;
z-index: 99;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
body.sticky-header .header .header-main:before {
height: 80px;
}
body.sticky-header .header .header-top-left:before {
height: 80px;
}
body.sticky-header .header .logo {
padding: 16px 0;
}
body.sticky-header .header .logo h1,
body.sticky-header .header .logo h2 {
font-size: 30px;
}
body.sticky-header .header .nav-main {
min-height: 80px;
}
@media all and (min-width: 992px) {
body.sticky-header .header .flexnav > li > a {
line-height: 80px;
}
body.sticky-header .header.menu-pills .flexnav {
padding-top: 18px;
}
body.sticky-header .header.menu-pills .flexnav > li > a {
line-height: 44px;
}
}
.header-top {
background: #2f2f2f;
padding: 14px 0;
color: #a3a3a3;
font-size: 10px;
line-height: 16px;
text-transform: uppercase;
}
@media (max-width: 767px) {
.header-top {
display: table;
}
}
.header-top ul {
padding-left: 0;
list-style: none;
margin-left: -5px;
margin: 0;
display: inline-block;
}
.header-top ul > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.header-top ul > li {
position: relative;
padding: 0 10px 0 13px;
}
.header-top ul > li:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
margin-top: -4px;
background: #616161;
height: 7px;
width: 1px;
}
.header-top ul > li:first-child {
padding-left: 0;
}
.header-top ul > li:first-child:before {
display: none;
}
.header-top .info-item {
margin-right: 25px;
}
.header-top a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.header-top a:hover {
text-decoration: none;
color: #fff;
border-bottom-color: #616161;
}
.header-top .fa {
font-size: 14px;
vertical-align: top;
margin-right: 5px;
color: #fff;
}
.header-top-left {
float: left;
}
@media (max-width: 767px) {
.header-top-left {
display: table;
}
}
.header-top-right {
float: right;
}
.header-top-right > span + span {
margin-left: 32px;
}
.header-top-right > span + span.info-item {
margin-left: 25px;
margin-right: 0;
}
.header-top-right > span.info-item {
margin-right: 0;
}
@media (max-width: 767px) {
.header-top-right {
float: none;
text-align: center;
}
}
/* Header Main */
.header-main {
position: relative;
background: #ececec;
}
.header-main:before,
.header-main:after {
content: " ";
display: table;
}
.header-main:after {
clear: both;
}
.header-main:before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100px;
background-image: -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff', GradientType=0);
}
.header-main > .container {
position: relative;
}
/* Logo */
.header .logo {
margin: 0;
padding: 29px 0;
-webkit-transition: 0.2s;
transition: 0.2s;
float: left;
}
.header .logo img {
position: relative;
display: inline-block;
z-index: 2;
}
.header .logo h1,
.header .logo h2 {
position: relative;
z-index: 2;
font-family: 'Anton', sans-serif;
font-size: 36px;
line-height: 1em;
text-transform: uppercase;
color: #2f2f2f;
font-weight: normal;
margin: 0;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.header .logo h1 > a,
.header .logo h2 > a {
color: #2f2f2f;
text-decoration: none;
display: inline-block;
}
.header .logo h1 > a:first-letter,
.header .logo h2 > a:first-letter {
color: #dc2a0b;
}
.header .logo .tagline {
margin: 0;
font-size: 10px;
line-height: 1.5em;
text-transform: uppercase;
color: #a3a3a3;
position: relative;
z-index: 2;
}


Gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder