{"id":75,"date":"2016-12-19T22:14:34","date_gmt":"2016-12-19T22:14:34","guid":{"rendered":"http:\/\/docs.generatepress.com\/?post_type=kp_articles&p=75"},"modified":"2016-12-24T06:11:54","modified_gmt":"2016-12-24T06:11:54","slug":"header-widget","status":"publish","type":"keep_articles","link":"https:\/\/docs.generatepress.com\/article\/header-widget\/","title":{"rendered":"Header Widget"},"content":{"rendered":"

By default, there’s a header widget area available to you in “Appearance > Widgets” or “Customize > Widgets”.<\/p>\n

You can put any kind of widget in this area and it will show up on the right side of your header area.<\/p>\n

By default it’s set to float right and be 50% width of your header. You can adjust this with some CSS:<\/p>\n

.header-widget {\n    float: right;\n    max-width: 50%;\n}\n<\/pre>\n
Showing your header widget below other header elements on mobile<\/h3>\n
Sometimes people want to display the header widget below their other header elements while on mobile. This is achievable with some CSS:<\/p>\n
@media (max-width: 768px) {\n\t.inside-header {\n\t\tdisplay: -webkit-box;\n\t\tdisplay: -moz-box;\n\t\tdisplay: -ms-flexbox;\n\t\tdisplay: -webkit-flex;\n\t\tdisplay: flex;\n\t\t-webkit-flex-flow: row wrap;\n\t\tflex-flow: row wrap;\n \t}\n    \n\t.site-branding {\n\t\t-webkit-box-ordinal-group: 1;\n\t\t-moz-box-ordinal-group: 1;\n\t\t-ms-flex-order: 1;\n\t\t-webkit-order: 1;\n\t\torder: 1;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n    \n\t.site-logo {\n\t\t-webkit-box-ordinal-group: 2;  \n\t\t-moz-box-ordinal-group: 2;     \n\t\t-ms-flex-order: 2;     \n\t\t-webkit-order: 2;  \n\t\torder: 2;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.header-widget {\n\t\t-webkit-box-ordinal-group: 3;\n\t\t-moz-box-ordinal-group: 3;\n\t\t-ms-flex-order: 3;\n\t\t-webkit-order: 3;\n\t\torder: 3;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n}<\/pre>\n","protected":false},"template":"","yoast_head":"\nHeader Widget - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.generatepress.com\/article\/header-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Header Widget - Documentation\" \/>\n<meta property=\"og:description\" content=\"By default, there’s a header widget area available to you in “Appearance > Widgets” or “Customize > Widgets”. You can put any kind of widget in this area and it will show up on the right side of your header area. By default it’s set to float right and be 50% width of your header. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.generatepress.com\/article\/header-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GeneratePress\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-24T06:11:54+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@GeneratePress\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-widget\/\",\"url\":\"https:\/\/docs.generatepress.com\/article\/header-widget\/\",\"name\":\"Header Widget - Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.generatepress.com\/#website\"},\"datePublished\":\"2016-12-19T22:14:34+00:00\",\"dateModified\":\"2016-12-24T06:11:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.generatepress.com\/article\/header-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.generatepress.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/docs.generatepress.com\/article\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Header Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.generatepress.com\/#website\",\"url\":\"https:\/\/docs.generatepress.com\/\",\"name\":\"Documentation\",\"description\":\"Get to Know GeneratePress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.generatepress.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Header Widget - Documentation","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:\/\/docs.generatepress.com\/article\/header-widget\/","og_locale":"en_US","og_type":"article","og_title":"Header Widget - Documentation","og_description":"By default, there’s a header widget area available to you in “Appearance > Widgets” or “Customize > Widgets”. You can put any kind of widget in this area and it will show up on the right side of your header area. By default it’s set to float right and be 50% width of your header. […]","og_url":"https:\/\/docs.generatepress.com\/article\/header-widget\/","og_site_name":"Documentation","article_publisher":"https:\/\/www.facebook.com\/GeneratePress","article_modified_time":"2016-12-24T06:11:54+00:00","twitter_card":"summary_large_image","twitter_site":"@GeneratePress","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.generatepress.com\/article\/header-widget\/","url":"https:\/\/docs.generatepress.com\/article\/header-widget\/","name":"Header Widget - Documentation","isPartOf":{"@id":"https:\/\/docs.generatepress.com\/#website"},"datePublished":"2016-12-19T22:14:34+00:00","dateModified":"2016-12-24T06:11:54+00:00","breadcrumb":{"@id":"https:\/\/docs.generatepress.com\/article\/header-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.generatepress.com\/article\/header-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.generatepress.com\/article\/header-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.generatepress.com\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/docs.generatepress.com\/article\/"},{"@type":"ListItem","position":3,"name":"Header Widget"}]},{"@type":"WebSite","@id":"https:\/\/docs.generatepress.com\/#website","url":"https:\/\/docs.generatepress.com\/","name":"Documentation","description":"Get to Know GeneratePress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.generatepress.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api\/75"}],"collection":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api"}],"about":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/types\/keep_articles"}],"wp:attachment":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/media?parent=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}