{"id":17562,"date":"2013-07-03T21:01:18","date_gmt":"2013-07-03T13:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17562"},"modified":"2025-04-24T17:18:37","modified_gmt":"2025-04-24T09:18:37","slug":"show-n-hide-notification-bar","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/","title":{"rendered":"Web Design: Hide \/ Show Notification Bar With CSS3"},"content":{"rendered":"<p>Inspired by a comment from one of our readers on our previous post (<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-bounce-effect\/#comment-809928436\">CSS3 Bounce Effect<\/a>), we are going to show you how to create a notification bar with a control button in this tutorial. The idea is that we will be able to hide or show the notification bar by clicking on a button \u2013 similar to the <code>HelloBar<\/code>.<\/p>\n<p>As the title says, we will be doing this using only some CSS3 features. Well, let\u2019s just get started.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/show-n-hide-notification-bar\/\">View Demo<\/a>\n<\/div>\n<h2>HTML Markup<\/h2>\n<p>We start by creating the document and structuring the HTML markup. It is worth noting that the HTML markup plays an important role for the \u201chide-n-show\u201d function to work properly, as the function will be built purely using CSS3, which is sensitive to element structure and position.<\/p>\n<p>Add the HTML elements in the following order.<\/p>\n<pre>\n&lt;div class=\"notification-bar\"&gt;\n  &lt;input id=\"hide\" type=\"radio\" name=\"bar\" value=\"hide\"&gt;\n  &lt;input id=\"show\" type=\"radio\" name=\"bar\" value=\"show\" checked=\"checked\"&gt;\n\n  &lt;label for=\"hide\"&gt;hide&lt;\/label&gt;\n  &lt;label for=\"show\"&gt;show&lt;\/label&gt;\n\n  &lt;div class=\"notification-text\"&gt;Hello World, you can hide this notification by clicking the close button.&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>As you can see from the above code, we added two radio inputs with their labels to control the notification bar visibility \u2013 and, by default, the radio input with an id of <code>show<\/code> is <code>checked<\/code>.<\/p>\n<p>At this point, some of you might already get the picture of how this works. When the radio input with an id of <code>hide<\/code> is checked, the notification bar will be hidden, and it will be displayed when the radio input with an id of <code>show<\/code> is checked.<\/p>\n<h2>Styles<\/h2>\n<p>Let\u2019s add some decorative styles to make the notification bar look nicer. This includes specifying the notification\u2019s background color, the font color, hiding the radio inputs, and adding representative icons to their labels.<\/p>\n<pre>\n.notification-bar {\n  position: absolute;\n  width: 100%;\n}\n.notification-text {\n  background-color: #2980B9;\n  padding: 15px;\n  color: #fff;\n  font-size: 14px;\n  text-align: center;\n  position: absolute;\n  width: 100%;\n}\n.notification-bar input {\n  display: none;\n}\n.notification-bar label {\n  cursor: pointer;\n  color: #fff;\n  position: absolute;\n  z-index: 5;\n  display: inline-block;\n  text-indent: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.notification-bar label[for=hide] {\n  right: 15px;\n  top: 11px;\n  width: 24px;\n  height: 24px;\n  background: url('..\/img\/close.png') no-repeat center center;\n}\n.notification-bar label[for=show] {\n  width: 45px;\n  height: 50px;\n  border-radius: 0px 0px 3px 3px;\n  right: 10px;\n  background: url('..\/img\/show.png') no-repeat center center #2980B9;\n}\n<\/pre>\n<p>Then, our notification bar will look like the following screenshot.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Notification bar first preview\" height=\"200\" src=\"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg\" width=\"500\"><\/figure>\n<p>It\u2019s really simple. You can always add more styles if you want to.<\/p>\n<h2>Build the Function<\/h2>\n<p>As we are using the input radio button, we are able to apply the CSS3 <code>:checked<\/code> pseudo-class and then target the elements that follow using the sibling selector.<\/p>\n<pre>\n.notification-bar input[value=show]:checked ~ label[for=show] {\n  -webkit-transition: ease 350ms;\n  -moz-transition: ease 350ms;\n  -o-transition: ease 350ms;\n  transition: ease 350ms;\n\n  -webkit-transform: translateY(-100%);\n  -moz-transform: translateY(-100%);\n  -o-transform: translateY(-100%);\n  transform: translateY(-100%);\n}\n<\/pre>\n<p>Given the above code, when the radio input with an <code>id<\/code> of <code>show<\/code> is checked, its associated label with the <code>for=\"show\"<\/code> attribute is moved to the top by 100% from its original position, while the additional transition property will make it move smoothly.<\/p>\n<p>The button that is used to hide the notification bar should be visible, as you can see below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Notification bar close button visible\" height=\"200\" src=\"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/close-button.jpg\" width=\"500\"><\/figure>\n<p>Next, when users click on the close button, the notification bar, as well as the close button, should move to the top and disappear. Meanwhile, the button used to pull it down should return to its original position.<\/p>\n<p>To do so, we can write the rule in this way.<\/p>\n<pre>\n.notification-bar input[value=show]:checked ~ label[for=show],\n.notification-bar input[value=hide]:checked ~ label[for=hide],\n.notification-bar input[value=hide]:checked ~ .notification-text {\n  -webkit-transition: ease 350ms;\n  -moz-transition: ease 350ms;\n  -o-transition: ease 350ms;\n  transition: ease 350ms;\n\n  -webkit-transform: translateY(-100%);\n  -moz-transform: translateY(-100%);\n  -o-transform: translateY(-100%);\n  transform: translateY(-100%);\n}\n.notification-bar input[value=hide]:checked ~ label[for=show] {\n  -webkit-transition: ease 350ms;\n  -moz-transition: ease 350ms;\n  -o-transition: ease 350ms;\n  transition: ease 350ms;\n\n  -webkit-transform: translateY(0%);\n  -moz-transform: translateY(0%);\n  -o-transform: translateY(0%);\n  transform: translateY(0%);\n}\n<\/pre>\n<p>Then, to show the notification bar, we can write the rule, as follows.<\/p>\n<pre>\n.notification-bar input[value=show]:checked ~ label[for=hide],\n.notification-bar input[value=show]:checked ~ .notification-text {\n  -webkit-transition: ease 350ms;\n  -moz-transition: ease 350ms;\n  -o-transition: ease 350ms;\n  transition: ease 350ms;\n\n  -webkit-transform: translateY(0%);\n  -moz-transform: translateY(0%);\n  -o-transform: translateY(0%);\n  transform: translateY(0%);\n}\n<\/pre>\n<h2>Final Touch<\/h2>\n<p>Lastly, I would like to add a small animation effect when the notification bar first loads. To do so, I create a <code>@kyeframe<\/code> rule, like so.<\/p>\n<pre>\n@keyframes initiate {\n  0% {\n    transform:translateY(-100%);\n  }\n  50% {\n    transform:translateY(-50%);\n  }\n  100% {\n    transform:translateY(0%);\n  }\n}\n<\/pre>\n<p>And assign the animation to the notification text container.<\/p>\n<pre>\n.notification-text {\n  background-color: #2980B9;\n  padding: 15px;\n  color: #fff;\n  font-size: 14px;\n  text-align: center;\n  position: absolute;\n  width: 100%;\n\n  -webkit-animation: initiate 350ms ease;\n  -moz-animation: initiate 350ms ease;\n  -o-animation: initiate 350ms ease;\n  animation: initiate 350ms ease;\n}\n<\/pre>\n<p class=\"note\"><strong>Check out:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\">Creating Advanced \u201cMarquee\u201d With CSS3 Animation<\/a><\/p>\n<p>That\u2019s all the code we need. You can now see it in action in the demo page or download the source from the following links.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/show-n-hide-notification-bar\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/show-n-hide-notification-bar\/\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a control button in this tutorial. The idea is that we will be able to hide or show the notification bar by clicking on a button&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,506,2016,2543],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create Hide \/ Show Notification Bar With CSS3<\/title>\n<meta name=\"description\" content=\"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a\" \/>\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.hongkiat.com\/blog\/show-n-hide-notification-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design: Hide \/ Show Notification Bar With CSS3\" \/>\n<meta property=\"og:description\" content=\"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-03T13:01:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:18:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Web Design: Hide \\\/ Show Notification Bar With CSS3\",\"datePublished\":\"2013-07-03T13:01:18+00:00\",\"dateModified\":\"2025-04-24T09:18:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/\"},\"wordCount\":502,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/show-n-hide-notification-bar\\\/first-preview.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"notification bar\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/\",\"name\":\"How to Create Hide \\\/ Show Notification Bar With CSS3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/show-n-hide-notification-bar\\\/first-preview.jpg\",\"datePublished\":\"2013-07-03T13:01:18+00:00\",\"dateModified\":\"2025-04-24T09:18:37+00:00\",\"description\":\"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/show-n-hide-notification-bar\\\/first-preview.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/show-n-hide-notification-bar\\\/first-preview.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/show-n-hide-notification-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design: Hide \\\/ Show Notification Bar With CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Hide \/ Show Notification Bar With CSS3","description":"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a","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.hongkiat.com\/blog\/show-n-hide-notification-bar\/","og_locale":"en_US","og_type":"article","og_title":"Web Design: Hide \/ Show Notification Bar With CSS3","og_description":"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a","og_url":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-07-03T13:01:18+00:00","article_modified_time":"2025-04-24T09:18:37+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Web Design: Hide \/ Show Notification Bar With CSS3","datePublished":"2013-07-03T13:01:18+00:00","dateModified":"2025-04-24T09:18:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/"},"wordCount":502,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","notification bar"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/","url":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/","name":"How to Create Hide \/ Show Notification Bar With CSS3","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg","datePublished":"2013-07-03T13:01:18+00:00","dateModified":"2025-04-24T09:18:37+00:00","description":"Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar with a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/show-n-hide-notification-bar\/first-preview.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/show-n-hide-notification-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design: Hide \/ Show Notification Bar With CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4zg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17562"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17562\/revisions"}],"predecessor-version":[{"id":74121,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17562\/revisions\/74121"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17562"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}