Published on: 21 December, 2016

How to shrink navigation bar when scrolling down in bootstrap?

Posted by andy | 520 views 0 comments
Digg Google Plus

For today tips, You will learn how easily you can shrink your bootstrap menu when you perform a scrolling content of a website page.

In this example, I will use the basic bootstrap layout provided by getbootstrap website. The basic template of bootstrap will be as follow. This template is using bootstrap 3.x.x version.

I will include a new css file called style.css, this will be used to overwrite the existing bootstrap css menu navigation and to style the updated version of our sample testing page.

By default, the .navbar class has a minimum height of 50px. I modified the height for the purpose of this example to 100px. Note, you have to include a media css with minimum width of 768px as below. Otherwise it will not overwrite the default value specified by bootstrap nav.less css file. Another reason is we only want to target desktop view only, so this will not apply for mobile view.

@media (min-width: 768px){
	.navbar {
		height:100px;
	}
	
	.navbar-nav{
		margin:25px 0;
	}
}

The next step that we need to do is to shrink the menu once we perform a scrolling. What do we need is we need to attach a window scrolling event, if a user perform a scrolling page content then we add a shrink class to the main navigation wrapper.

You can add the following script at the end of the javascript groups in the footer page section. Take a note that I add an id attribute to the nav tag. If you do not want to add the id attribute, you can use the css class instead.

var scrollHeight = 30;
$(window).scroll(function() {
	$('#main-nav').toggleClass("shrink", $(document).scrollTop() > scrollHeight);
});

If you see above javascript code, I declare a variable named scrollHeight. This type integer type will be used when the shrink css class will be applied to the navigation. In this example, it will be 30 pixels. The built in JQuery toggleClass is used to automatically remove or add a class name if the target attribute has already contains this css class name. By default when you are not performing any scrolling the css shrink class will not be included.

The next step we need to do is to include shrink css class in our style.css file. To give an obvious change effect of shrink changes, we add a css3 transition background change to make it noticeable. As we are using blue background for the color, we need to style the link to white color so it can be readable. See the updated css below.

@media (min-width: 768px){
	body{
		padding-top:130px;
	}
	
	.navbar {
		height:100px;
	}
	
	.navbar-nav{
		margin:25px 0;
	}
	
	.navbar.shrink{
		height: auto;
		background:#6293ec;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
	
	.shrink .navbar-nav{
		margin:0;
	}

	.shrink .navbar-nav>li>a {
		color: #fff;
	}
}

To see the quick demo of shrinking bootstrap menu, please click on this link. Or alternatively, you can download the demo on this link.

If you have any question or need some help regarding with this article, feel free to drop your comment below.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.