Sridhar Katakam

Genesis and WordPress Tutorials

Utility Bar in Dynamik

by 2 Comments

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.

utility-bar-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 like this:

utility-bar-dynamik-widget-areas

Make sure they are set to Shortcode type.

Step 2: Hook Boxes

Create a custom hook box like this:

utility-bar-dynamik-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>
view raw gistfile1.txt hosted with ❤ by GitHub

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%;
}
}
view raw style.css hosted with ❤ by GitHub

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.

References:

http://www.carriedils.com/widget-area-above-header-genesis/

http://dynamikdocs.cobaltapps.com/article/70-custom-widget-areas

  • Im having issues with changing the utility bars balk ground color. I need it to be color F7EBD7. I changed the colors in the css and nothing. Please help.
    Domain is realgoodmeals.com
    Thanks

    Reply
    • >