masheen

I don’t update it and not going. just want to know where to fix it for me to achieve my desired effect

no, I’m just in Google Chrome right-click the mouse and take to look through the code and fix it there like on my picture and it all works. And I want to know where it can be corrected in the theme itself.

See if I open Google Chorme and change this line (in the picture marked in red) then it’s works. Text =”1″ when mouse over button text=”2″ Where me change it in the Zerif lite theme itself to make it work always?
http://itmag.es/33Swq
http://itmag.es/1IXHT

codemovement.pk
no
it is not resolved

kafleg
alter.esy.es

kafleg
alter.esy.es

At Sidney in Main.js there is this code. I understand it adds a class of float-header if Y>107

var headerFixed = function() {
			var headerFix = $('.site-header').offset().top;
			$(window).on('load scroll', function() {
				var y = $(this).scrollTop();
				if ( y >= headerFix) {
					$('.site-header').addClass('fixed');
				} else {
					$('.site-header').removeClass('fixed');
				}
				if ( y >= 107 ) {
					$('.site-header').addClass('float-header');
				} else {
					$('.site-header').removeClass('float-header');
				}
			});

and then it is called style.css.

.site-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,0.0);
		padding: 20px 0;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;

	}

.site-header.fixed {
    position: fixed;
}

.site-header.float-header {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

The Zerif-lite it is called .header.header > .navbar

.header.header > .navbar {
	background-color: rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);

so i need to Zerif-lite in bootstrap.min add modified code???

var headerFixed = function() {
			var headerFix = $('.header.header > .navbar').offset().top;
			$(window).on('load scroll', function() {
				var y = $(this).scrollTop();
				if ( y >= headerFix) {
					$('.header.header > .navbar').addClass('fixed');
				} else {
					$('.header.header > .navbar').removeClass('fixed');
				}
				if ( y >= 107 ) {
					$('.header.header > .navbar').addClass('float-header');
				} else {
					$('.header.header > .navbar').removeClass('float-header');
				}
			});
	};
$(function() {
		headerFixed();
}

and in Style.css call .header.header > .navbar.float-header

.header.header > .navbar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: rgba(0,0,0,0.0);
		padding: 20px 0;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;

	}

.header.header > .navbar.fixed {
    position: fixed;
}

.header.header > .navbar.float-header  {
    background-color: rgba(0,0,0,0.9);
    padding: 5px;
}

right?? but it is not work! :-(((

What if I do like, but instead Hover to indicate something associated with Scorll ??? Or something like that? Edit zerif-lite style.css

}
.header.header > .navbar {
	background-color: rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
transition: background 0.3s ease 0.5s, transform 0.2s ease-in-out 0.5s;

}

.header.header > .navbar:hover
{
background:rgba(0,0,0,0.5);
-webkit-animation: pulse 1.5s infinite ease-in-out;
}