fixed header menu using html
in this blog shows how to make fixed header or menu bar, suppose user move scroll and developer wants menubar should fixed to easy navigation from pages.
<html>
<style>
.home {
width: 100%; height:100%; overflow-y: scroll;
margin-top: 100px;
}
div.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
<body>
<div class="header" style="width:100%; text-align: center; background: #000000; padding-top: 4%; padding-bottom: 4%;">
<p style="vertical-align: middle; color: white">Head Bar</p>
</div>
<div class="home">
<img src="photo1.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 1</p>
<p>Content 1</p>
<p>Author: Alex</p>
</div>
<img src="photo2.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 2</p>
<p>Content 2.</p>
<p>Author: Alex</p>
</div>
<img src="photo3.jpg" style="width:100%; height:30%; max-height:30%;"/>
<div>
<p>Title 3</p>
<p>Content 3.</p>
<p>Author: Alex</p>
</div>
</div>
</body>
</html>
in above example header class setting fixed position , if user moving scroll position it still fixed header
please comment your query or valuable message.
No comments:
Post a Comment