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.