There are multiple advantage of using a fixed Header and Footer in your webpage. You can put your navigation and social media profile links in header and footer and it will be always visible to users. With fixed header when your visitor reads your post and come to the end then from there he can go to other section of your website and this way user engagement will increase.
In this post i will create a simple page layout with Fixed Header and Footer using basic HTML and CSS code. You can use given code snippet to modify the design.
I will use the HTML
div tag and apply CSS property
position:fixed to achive this.
You need to create two div tags, one for Fixed Header and another one for Fixed Footer. Your page layout should look like below code, put given code inside body section of webpage.
Here div tags with id fixedheader and fixedfooter will be used as your page header and footer. You can put your navigation links and social media profiles inside these header and footer.
<div id="fixedheader">Top div content</div>
<p>Content placeholder ...</p>
<div id="fixedfooter">Bottom div content</div>
Now we need to apply CSS code to these div id, we can do that by adding below code in head section of the webpage
margin:80px 80px 100px 100px;
In the above CSS code i have used the CSS property
position:fixed for both header and footer div, when user will scroll the page then your header and footer will always be visible to him.
After adding all the above code your webpage should look like this
I have given very simple code so that it will be very easy to understand, you can use this as a reference and apply your imagination to design your version of cool header and footer for your website.
Please add important points from your side in the comments. Also if you are interested to submit any article, you can do so by visiting here Join CodingByte
Latest posts by Rakesh Kumar (see all)
- How To Use Rsync to Backup Local and Remote Directories on Linux - August 20, 2016
- Data Loading Using Teradata Fastload Utility and its Limitation - July 24, 2015
- What is Big Data and How Big It Is? - September 7, 2014