Utility Bar in Dynamik

In the members-only forum, Paul wrote:

Hi Sridhar

I’ve been trying to add Carrie Dils’ utility bar to Dynamik but it’s just not happening. I can create something similar using a nav bar and floating content right but it doesn’t look too good on phones…

2 widget areas would work so much better!

Hope you can help, thanks

This tutorial provides details of how Utility Bar can be set up above the header in Dynamik.

Steps 1 to 3 below are to be done after navigating to Genesis > Dynamik Custom in your WordPress admin.

Step 1: Widget Areas

Create Utility Bar Left and Utility Bar Right widget areas.

Make sure they are set to Shortcode type.

Step 2: Hook Boxes

Here’s the code:

<div class="utility-bar">
<div class="wrap">
<?php echo do_shortcode( '[utility_bar_left]' ); ?>
<?php echo do_shortcode( '[utility_bar_right]' ); ?>
</div>
</div>

Step 3: CSS

Add the following in CSS section:

.wrap {
	max-width: 1140px;
	margin: 0 auto;
}

/* Utility Bar
--------------------------------------------- */

.utility-bar {
	background-color: #333;
	border-bottom: 1px solid #ddd;
	color: #ddd;
	font-size: 12px;
	padding: 10px 0;
}

.utility-bar a {
	color: #ccff33;
}

.utility-bar a:hover {
	color: #ccff33;
	text-decoration: underline;
}

.utility-bar .dynamik-widget-area {
	background: transparent;
	color: #ddd;
	width: 50%;
}

.utility-bar .dynamik-widget-area p {
	margin-bottom: 0;
}

#utility_bar_left {
	float: left;
}

#utility_bar_right {
	float: right;
	text-align: right;
}

@media only screen and (max-width: 1140px) {

	.utility-bar {
		padding-left: 3%;
		padding-right: 3%;
	}

}

@media only screen and (max-width: 568px) {

	#utility_bar_left, #utility_bar_right {
		float: none;
		text-align: center;
	}
	
	#utility_bar_left {
		margin-bottom: 10px;
	}

	.utility-bar .dynamik-widget-area {
		width: 100%;
	}

}

Step 4: Populate the widget areas

Go to Appearance > Widgets and drag your desired widgets into Utility Bar Left and Utility Bar Right widget areas.