Header Widget

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. You can adjust this with some CSS:

.header-widget {
    float: right;
    max-width: 50%;
}

Showing your header widget below other header elements on mobile

Sometimes people want to display the header widget below their other header elements while on mobile. This is achievable with some CSS:

@media (max-width: 768px) {
	.inside-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	.site-branding {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		margin-left: auto;
		margin-right: auto;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
		margin-left: auto;
		margin-right: auto;
	}

	.header-widget {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
		margin-left: auto;
		margin-right: auto;
	}
}