It is a well-known, tried-and-tested method to have a sticky navigation bar at the top of a responsive website design and layout.
A fixed navigation bar at the top helps mobile or desktop website users have a fixed area where they can find navigation icons and links through which they can browse and navigate the current website. Having a fixed navigation bar at the top helps webmasters increase page views, i.e., it helps webmasters increase the page views per visit ratio.
Yes, it occupies space at the top, but it helps the user have navigation links handy whenever he wants to browse the website. Space constraints only refer to mobile devices with small screen sizes.
The following is the code that helps you have a fixed navigation bar. Copy and paste the 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