Increasing page views per visit (session) ratio by sticky top navigation bar, here is how to create sticky navigation bar that becomes fixed to the top after scrolling

It is well known tried & tested method to have sticky navigation bar at top when you have responsive website design & layout.

A fixed navigation bar at top helps mobile user or desktop website user to have fixed area where he can find navigation icons & links through which he can browse & navigate current website. Having fixed navigation bar at top helps webmaster to increase page views i.e. it helps webmaster to increase page views per visits ratio.

Yes, it occupies space at top but helps user to have navigation links handy whenever he want to browse the website. Space constraints only refer to mobile devices with small screen size.

Following is the code which help you to have fixed navigation bar. Copy paste following css code in your style.css


#navbar {
   	position: fixed;
	z-index: 1000;
   	height: 50px;
	width: 100%;

#header {
   	margin-top: 50px;

Hope it helps,

Thanks & Regards
Mandar Apte

Mandar Apte

This website contains a design articles blog by Mandar Apte. He writes and shares his iOS development, graphic, web, & animation film design experience through articles. Mandar is Mumbai based multi-disciplinary designer with expertise in UI, UX, Logo, Symbol, and Brand Identity design. He is an alumnus of Sir J. J. Institute of Applied Art, Mumbai. He currently runs his studio in the heart of the city of Mumbai.

Leave a Reply

Your email address will not be published. Required fields are marked *