{"id":733,"date":"2012-02-20T08:29:06","date_gmt":"2012-02-20T16:29:06","guid":{"rendered":"http:\/\/virendrachandak.wordpress.com\/?p=733"},"modified":"2014-10-09T17:37:33","modified_gmt":"2014-10-10T00:37:33","slug":"sticky-header-and-footer-using-css","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","title":{"rendered":"Sticky Header and Footer using CSS"},"content":{"rendered":"

In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how we can implement the sticky (or fixed) header and footer using only HTML and CSS.<\/p>\n

To create a layout with sticky header and footer can be easily done using the CSS property position:fixed<\/strong>. In my example, I will be displaying a sticky header and a sticky footer.<\/p>\n

<\/p>\n

HTML Code<\/strong>:<\/p>\n

\r\n<!-- BEGIN: Sticky Header -->\r\n<div id="header_container">\r\n\t<div id="header">\r\n\t\tHeader Content\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Sticky Header -->\r\n\r\n<!-- BEGIN: Page Content -->\r\n<div id="container">\r\n\t<div id="content">\r\n\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.\r\n\t\t<br \/><br \/>\r\n\t\tNam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.\r\n\t\t...\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Page Content -->\r\n\r\n<!-- BEGIN: Sticky Footer -->\r\n<div id="footer_container">\r\n\t<div id="footer">\r\n\t\tFooter Content\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Sticky Footer -->\r\n<\/pre>\n
CSS Code<\/strong>:<\/p>\n
\r\n\/* Reset body padding and margins *\/\r\nbody { margin:0; padding:0; }\r\n\r\n\/* Make Header Sticky *\/\r\n#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }\r\n#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }\r\n\r\n\/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*\/\r\n#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }\r\n#content{}\r\n\r\n\/* Make Footer Sticky *\/\r\n#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }\r\n#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }\r\n<\/pre>\n
Complete code<\/strong>: In this I have the CSS inside HTML file. You can move it out to external CSS file (which I think is a good idea so that browser caches it and the size of HTML file reduces).<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Sticky Header and Footer<\/title>\r\n<style type="text\/css">\r\n\/* Reset body padding and margins *\/\r\nbody { margin:0; padding:0; }\r\n\r\n\/* Make Header Sticky *\/\r\n#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }\r\n#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }\r\n\r\n\/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*\/\r\n#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }\r\n#content{}\r\n\r\n\/* Make Footer Sticky *\/\r\n#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }\r\n#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<!-- BEGIN: Sticky Header -->\r\n<div id="header_container">\r\n\t<div id="header">\r\n\t\tHeader Content\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Sticky Header -->\r\n\r\n<!-- BEGIN: Page Content -->\r\n<div id="container">\r\n\t<div id="content">\r\n\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.\r\n\t\t<br \/><br \/>\r\n\t\tNam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.\r\n\t\t...\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Page Content -->\r\n\r\n<!-- BEGIN: Sticky Footer -->\r\n<div id="footer_container">\r\n\t<div id="footer">\r\n\t\tFooter Content\r\n\t<\/div>\r\n<\/div>\r\n<!-- END: Sticky Footer -->\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Here are the links to code and demo.
\n<\/i> View Demo<\/a>
\n<\/i> Download Source Code<\/a>\n<\/div>\n
I have tested this on following browsers\/systems<\/div>\n
    \n
  • Internet Explorer 9 on Windows 7 Professional(64 bit)<\/li>\n
  • Internet Explorer 8 on Windows XP Professional<\/li>\n
  • Firefox 8.0.1 on Windows 7 Professional(64 bit) and Windows XP Professional<\/li>\n
  • Chrome 16 on Windows 7 Professional(64 bit) and Windows XP Professional<\/li>\n
  • Opera 11.50 on Windows XP Professional<\/li>\n
  • Safari 5.0.3 on Windows XP Professional<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how we can implement the sticky (or fixed) header and footer using only HTML and CSS. To create a layout with sticky header and footer can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[142,8],"tags":[9,39,124,61,62],"class_list":["post-733","post","type-post","status-publish","format-standard","hentry","category-css","category-web-development","tag-css","tag-html","tag-snippets","tag-sticky-footer","tag-sticky-header"],"yoast_head":"\nSticky Header and Footer using CSS - Virendra's TechTalk<\/title>\n<meta name=\"description\" content=\"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Header and Footer using CSS - Virendra's TechTalk\" \/>\n<meta property=\"og:description\" content=\"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Virendra's TechTalk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/virendrachandak\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-20T16:29:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-10-10T00:37:33+00:00\" \/>\n<meta name=\"author\" content=\"Virendra Chandak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:site\" content=\"@virendrachandak\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Virendra Chandak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/\"},\"author\":{\"name\":\"Virendra Chandak\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"headline\":\"Sticky Header and Footer using CSS\",\"datePublished\":\"2012-02-20T16:29:06+00:00\",\"dateModified\":\"2014-10-10T00:37:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/\"},\"wordCount\":993,\"commentCount\":62,\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"keywords\":[\"CSS\",\"HTML\",\"snippets\",\"Sticky Footer\",\"Sticky Header\"],\"articleSection\":[\"CSS\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/\",\"name\":\"Sticky Header and Footer using CSS - Virendra's TechTalk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\"},\"datePublished\":\"2012-02-20T16:29:06+00:00\",\"dateModified\":\"2014-10-10T00:37:33+00:00\",\"description\":\"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/sticky-header-and-footer-using-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TechTalk\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/category\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sticky Header and Footer using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#website\",\"url\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/\",\"name\":\"Virendra's TechTalk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/63f7ffa1ea125e32af9618d188349e17\",\"name\":\"Virendra Chandak\",\"logo\":{\"@id\":\"https:\\\/\\\/www.virendrachandak.com\\\/techtalk\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.virendrachandak.com\",\"https:\\\/\\\/www.facebook.com\\\/virendrachandak\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/virendrachandak\\\/\",\"https:\\\/\\\/x.com\\\/virendrachandak\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Header and Footer using CSS - Virendra's TechTalk","description":"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Header and Footer using CSS - Virendra's TechTalk","og_description":"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how","og_url":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","og_site_name":"Virendra's TechTalk","article_publisher":"https:\/\/www.facebook.com\/virendrachandak","article_author":"https:\/\/www.facebook.com\/virendrachandak","article_published_time":"2012-02-20T16:29:06+00:00","article_modified_time":"2014-10-10T00:37:33+00:00","author":"Virendra Chandak","twitter_card":"summary_large_image","twitter_creator":"@virendrachandak","twitter_site":"@virendrachandak","twitter_misc":{"Written by":"Virendra Chandak","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/#article","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/"},"author":{"name":"Virendra Chandak","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"headline":"Sticky Header and Footer using CSS","datePublished":"2012-02-20T16:29:06+00:00","dateModified":"2014-10-10T00:37:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/"},"wordCount":993,"commentCount":62,"publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"keywords":["CSS","HTML","snippets","Sticky Footer","Sticky Header"],"articleSection":["CSS","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","url":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/","name":"Sticky Header and Footer using CSS - Virendra's TechTalk","isPartOf":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website"},"datePublished":"2012-02-20T16:29:06+00:00","dateModified":"2014-10-10T00:37:33+00:00","description":"In some sites we want to keep the Header and Footer always visible and fixed to top and bottom of the screen respectively. In this article I will show how","breadcrumb":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.virendrachandak.com\/techtalk\/sticky-header-and-footer-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TechTalk","item":"https:\/\/www.virendrachandak.com\/techtalk\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.virendrachandak.com\/techtalk\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Sticky Header and Footer using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.virendrachandak.com\/techtalk\/#website","url":"https:\/\/www.virendrachandak.com\/techtalk\/","name":"Virendra's TechTalk","description":"","publisher":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.virendrachandak.com\/techtalk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/63f7ffa1ea125e32af9618d188349e17","name":"Virendra Chandak","logo":{"@id":"https:\/\/www.virendrachandak.com\/techtalk\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.virendrachandak.com","https:\/\/www.facebook.com\/virendrachandak","https:\/\/www.linkedin.com\/in\/virendrachandak\/","https:\/\/x.com\/virendrachandak"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2vTtQ-bP","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":631,"url":"https:\/\/www.virendrachandak.com\/techtalk\/make-a-div-stick-to-top-when-scrolled-to\/","url_meta":{"origin":733,"position":0},"title":"Make a div stick to top when scrolled to","author":"Virendra Chandak","date":"January 1, 2012","format":false,"excerpt":"There are times when you would want to display a bar at the top of the page when user scrolls on the page and it should go back to its original position when the user scrolls back up. This is particularly useful when you want to add say a share\u2026","rel":"","context":"In "Functionality"","block_context":{"text":"Functionality","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/functionality\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1090,"url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-hide-apache-information-with-servertokens-and-serversignature-directives\/","url_meta":{"origin":733,"position":1},"title":"How to hide apache information with ServerTokens and ServerSignature directives","author":"Virendra Chandak","date":"February 19, 2013","format":false,"excerpt":"In default Apache configuration, the server sends HTTP Header with the information of Apache version, modules, Operating System, etc of the Server. The HTTP response header \u201cServer\u201d displays all these details of the server. This information can be used by hackers to try to exploit any vulnerabilities in the Apache,\u2026","rel":"","context":"In "Server Configuration"","block_context":{"text":"Server Configuration","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/server-configuration\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":802,"url":"https:\/\/www.virendrachandak.com\/techtalk\/voting-functionality-in-a-website\/","url_meta":{"origin":733,"position":2},"title":"Voting Functionality in a website","author":"Virendra Chandak","date":"April 10, 2011","format":false,"excerpt":"In this post I will give the step by step explanation of how we can add Voting Functionality to a website. At the end of this article we will have a working sample voting application. The source code for the sample voting application can be downloaded from here. We will\u2026","rel":"","context":"In "Functionality"","block_context":{"text":"Functionality","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/functionality\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virendrachandak.com\/techtalk\/wp-content\/uploads\/2011\/10\/initial.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1088,"url":"https:\/\/www.virendrachandak.com\/techtalk\/how-to-hide-php-version-in-the-http-headers\/","url_meta":{"origin":733,"position":3},"title":"How to hide PHP version in the HTTP Headers","author":"Virendra Chandak","date":"November 4, 2012","format":false,"excerpt":"In default Apache\/PHP configuration, the server sends HTTP Header with the information of which PHP version is running on the server. The HTTP response header \"X-Powered-By\" displays the version of PHP that is running on the server. This information can be used by hackers to try to exploit any vulnerabilities\u2026","rel":"","context":"In "Server Configuration"","block_context":{"text":"Server Configuration","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/server-configuration\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1650,"url":"https:\/\/www.virendrachandak.com\/techtalk\/css-triangles-arrows-designs\/","url_meta":{"origin":733,"position":4},"title":"How to create Triangles using CSS","author":"Virendra Chandak","date":"December 15, 2013","format":false,"excerpt":"Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":117,"url":"https:\/\/www.virendrachandak.com\/techtalk\/optimizing-websites\/","url_meta":{"origin":733,"position":5},"title":"Optimizing \/ Speeding up websites","author":"Virendra Chandak","date":"April 14, 2011","format":false,"excerpt":"In this article I will list a few things that can be done to speed up website. I will give just brief description on each topic and give links to find more details on those topics. I have used tools like Google's Page Speed, YSlow, Audits Tab in Chrome\u00a0Developer\u00a0Tools. 1.\u2026","rel":"","context":"In "Optimization Tips"","block_context":{"text":"Optimization Tips","link":"https:\/\/www.virendrachandak.com\/techtalk\/category\/optimization-tips\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/comments?post=733"}],"version-history":[{"count":0,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/posts\/733\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/categories?post=733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virendrachandak.com\/techtalk\/wp-json\/wp\/v2\/tags?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}