AppyKit - Navbars

Back to components list

Navbar

Short codes: .nav-toRight .is-light

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toCenter .is-light

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toLeft .is-light

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toRight .is-dark

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toCenter .is-dark

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toLeft .is-dark

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toRight .is-purple

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toCenter .is-purple

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toleft .is-purple

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass

Navbar

Short codes: .nav-toRight .is-dark .container ---> .container-fluid

Show code


// navbar start
$(document).ready(function () {

	var nav = $('.navbar');

	nav.bootnavbar();

	$('.nav-icon').click(function () {
		$(this).toggleClass('open');
	});

	var prev = 0;
	var $window = $(window);

	$window.on('scroll', function () {
		var scrollTop = $window.scrollTop();
		nav.toggleClass('hidden', scrollTop > prev);
		nav.toggleClass('visible', scrollTop < prev && $(this).scrollTop() > 100);
		prev = scrollTop;
	});

});
// navbar end

navbar-2

Styles for this element are stored in:

app/sass/componentsStyles/_navbar.sass