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

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Leave a comment

Leave a Reply