Add widget area above header in Genesis

Create a Utility Bar Above the Header in Genesis

Ever laid awake at night with a burning desire to create some widget areas above the header in a Genesis child theme?

Me neither.

But maybe during your waking hours you’ve thought it’d be cool. In that case, me too.

Genesis Tutorial:
Create a “Utility Bar” Widget Area Above Header

Below is a quick tutorial to show you how to add a full-width “Utility Bar” above the header in your Genesis child theme.

A Utility Bar would be fantastic for:

  • Shopping cart total
  • User login / account links
  • Custom menu
  • Site search bar
  • Whatever else you can think of…

Register the widget areas

If we’re going to add one widget area above the header, we might as well add two! We’re going to call our widgets “Utility Bar Left” and “Utility Bar Right.”

Add this code to functions.php to register the two widget areas (as always, be careful when mucking about in functions.php – have a backup and FTP at the ready):


/** Register Utility Bar Widget Areas. */

genesis_register_sidebar( array(
'id' => 'utility-bar-left',
'name' => __( 'Utility Bar Left', 'theme-prefix' ),
'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
'id' => 'utility-bar-right',
'name' => __( 'Utility Bar Right', 'theme-prefix' ),
'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ),
) );

Once that’s in, you can go to Appearance > Widgets and you’ll see your new widget areas. Huzzah!

Utility Bar Widgets

Display the widget areas

Now that our widget areas are called into existence, we need to add a bit of code to get them to display on the site. In this case, I want the Utility Bar to show up everywhere on the site, not just the home page or a special template.

So, let’s head back to functions.php and add this:

Let’s talk a little about this code. Please, don’t just plop it into your site. It’s more fun when you know why it works.

The Genesis Action

One of my favorite things about the Genesis Framework is the ability to hook into just about any part of a page. Need to add something above the header? There’s a hook for that. Need to sandwich in something between the end of a post and the beginning of the comments? There’s a hook for that also.

When we talk about a hook action, that just means let’s take one of those hook locations Genesis provides (a.k.a. above the header) and add our own stuff in that spot. (A hook filter, on the other hand, let’s you modify what was going to pop out anyway).

Since we want our Utility Bar to appear before the header, we’re going to use the genesis_before_header hook. The code below will add our function utility_bar at the spot on the page where genesis_before_header happens.

add_action( 'genesis_before_header', 'utility_bar' );

Our Function

Still with me? Now we’re primed and ready. We just need to create a function called utility_bar and tell it what to do. In this case, that’s just spitting out our two widget areas.

For a better understanding of where you can use hooks on your own Genesis-powered site, check out the Genesis Visual Hook Plugin (one million internet points goes to Christopher Cochran for creating that plugin!)

Put a little style on it

The last bit of our journey here is to style our new Utility Bar widget areas. You’ll notice in the last step I added in a couple of divs with unique classes that we can target with some CSS.

Here’s what I’m using, but feel free to change up colors and fonts to suit your own needs:

That’s it! Ready for the big reveal?

I Now Give You: Widget Area Above Header!

utility-bar-widget-area-above-header

As a side note, this code should work fine for Genesis 2.0 themes, with or without HTML5 enabled. You’ll probably need to play with the styling to get it just the way you want it.

Have fun playing and post a link to show off your Utility Bar!

Fun fact: did you know I created a theme for the Genesis Framework called Utility? You can check out the theme demo here or buy a copy here. And of course the Utility theme includes a Utility bar. :)
Conductor Plugin
Rainmaker Platform: Build a Powerful Website

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. says

    Good stuff! This is one of those things that I really like about the Metro theme. Adds just enough space in a prime locale for all those things as you mentioned in your tut, in particular, a custom menu. Good goin’ Ms. Dils and a million internet points for you on this Monday morning : )

  2. says

    Thanks for the new tutorial Carrie. I love the way you make it so people can do something practical on their own site, it’s not just theory.

    PS. I got the Genesis Extender plugin after reading one of your previous articles. It’s perfect for making all kinds of tweaks and edits that would normally take some head scratching and code writing. Thanks for telling us about it.

  3. says

    Hi Carrie,

    Wonderful site – you’ve given me so many ideas. I was just wondering what plugin you use for your social icons (share, tweet, etc) below your content, or if you wrote the code yourself & used custom icons?

    I found a tutorial on writing the code yourself and adding it to the simple hooks plugin, but your icons look much better than mine & neater too.

    Thanks!
    Carly

  4. says

    Very slick. This is kind of similar to what AgentPress does but I prefer your implementation. You have 2 widget areas rather than 1 and they’re at the top of the page instead of the bottom where most people don’t look. :)

    • says

      Yes! Similar theory to the “disclaimer” bar on AgentPress, though I’ve never been impressed with the styling out of the box on that one. If you implement it on a site, post a link so we can see. :)

  5. says

    Hi Carrie,
    I was wondering if these bars are responsive. I want to add a “click to call” button or area to a site and this might be the right solution. What is your advice on that?

    • says

      Yep, they’re responsive! They’re just set to 50% screen width. You could make each one 100% screen width at smaller resolutions to make it look even better, depending on how it looks with your content.

  6. B D says

    Thank you for sharing such a simple and elegant solution.

    Not being a coder, I struggle with the following point: I need to use the utility bar in Minimum Pro. But while the header of Minimum Pro is fixed, the utility bar moves following the scroll and disappears when scrolling down. How to fix it, like the header?

    Thank you in advance,

    B D

  7. says

    Carrie,

    Thank you for sharing this—and with enough detail that I’ll actually be able to recreate it. I’m using a plugin to create these right now but would like to reduce my plugin footprint—this is more than enough to get me started.


    Jay

  8. Laura says

    Thank you for sharing this wonderful tutorial! I’m quite new at WordPress but I found it very easy!
    I would like to have a heigher bar because may social icons are bigger. Please let me know how can I have a double height bar.
    have a look here: http://www.villalamagia.com/sito_wp/

    • says

      Hi Donesia – yeah, you’ll likely need to remove most of the padding around the menu elements to get a custom menu to look good in that space. If you’re not using Firebug or similar to help you with targeting the right CSS elements, I highly recommend it!

      • says

        Thanks Carrie, yes I am using Firebug so it gives me a big help to finding how to reduce the padding. I will play with the padding for the menu this weekend. Thanks again for your help. Now I am onto adding in those call to action widgets from your other tutorial :)

      • says

        It’s already hooked before the header, so you may need to add it at a higher priority if you’ve still got content appearing above the utility bar. Try adding a priority of 5 to your add_action, like this:

        add_action( 'genesis_before_header', 'utility_bar', 5 );

          • says

            Ah, you’re using the Agency Pro theme. The header is repositioned in that theme via functions.php to come in at genesis_before instead of genesis_before_header.

            Use genesis_before for the add_action on the utility bar and play with the priority number (i.e. less than 5) and see if that works. Haven’t tested it – just guessing. :)

  9. says

    That did it! Thank you so much! And to think, I spent a good hour staring at the functions.php code knowing it was a simple fix, but I just couldn’t find it. LOL.

    You are awesome!

  10. says

    I am very late to this thread, but I’ve just come across your helpful blog and tutorials and was guided here by Andrea at Nuts&Bolts. I must have correctly inserted the utility bar in the code (as per yours!), into Genesis Streamline Pro, as I can see simple social icons showing. However, I just can’t seem to work out how to change the background colour of the bar as it’s showing light grey #ddd, which happens to be the same as my site background. I’ve tried all the colour options, I think, in the CSS coding you gave, to no avail. Any ideas? Tnx.

    • says

      Just to add to my comment above, having changed the site background colour to test things, I think my utility bar must be outside some ‘wrap’ code as it changed to the background colour too. I tried out other genesis hook positions but still had the problem. Tnx.

  11. says

    Carrie,
    Here’s a link to a page I’ve embedded a screen grab of my utility bar issues on my dev site. The bar is somehow being embedded within the overall background color of the site (light grey #ddd), and therefore immune to my changes to padding within the .utility css styling. It is also picking up my overall css link style of red, which I don’t want. Not sure how to resolve these 3 issues, but am sure it’s to do with its placing in genesis Streamline Pro. But I’ve tried all the hook options to no avail! If you’ve any time to help, I’d be oh so grateful! Much appreciated. http://www.strategyworks.net/sw-streamline-read-button-featured-widget-issue/

    • says

      Sounds like your CSS targets may need to be a little more specific, but I can’t troubleshoot without seeing the page live. Is your dev area online?

      • says

        Thanks Carrie for your help. It’s on local dev only right now, hence the screen grab link. I will deactivate it and try all over again, and then if that fails, I’ll get the site up live so you can see what’s what. Really kind to take the time to go over this, much appreciated!

        • says

          What CSS are you using? Make sure you’re prefacing everything with .utility-bar. So for a link, you’d say .utility-bar a {}.

          Also try using Firebug to play around live in the browser and see if you can target the elements correctly. :)

          • says

            Hi Carrie,
            I am still getting the same problem of the utility bar picking up the color scheme of the site background and its CSS being impervious to colour edits. As said, I’ve tried all the hook positions to no avail. I’ll put the site up live later today on a test link and perhaps if you’ve a mo, you could take a peek? I am sure it’s either that I need to inserts the CSS in a certain position in the style sheet (?), or the hook is wrong for Streamline Pro, but I draw a blank on the latter. Tnx for your assistance; I am sure it’s something small I am overlooking!

  12. says

    This is fabulous! I am using it now on my new design that I am working on. I would like to make it sticky upon scrolling. Is this possible? I created a js file for it – but used the selector .utility-bar. Will that grab it – or should I include both the right and left sides. If I need to grab both right and left, can you help me out with it? Thanks!

  13. says

    Carrie,
    OK, here’s the live site link with the utility bar issue. I checked the CSS and it’s ok as far as I can see. I am also getting the test text in the left bar, even when I put it into the right bar field in the widget! They both end up appearing left. Another blip! Here’s the link: http://wpreneur.com/swtest/

    Thanks for any more pointers on what’s going wrong here.

      • says

        Tnx Carrie, I have now defaulted the CSS styles to your tutorial ones.

        Still the utility bar refuses to adopt any of that, and it’s still sitting outside some sort of wrap that included with the header. It’s in the theme functions.php (not front page php) and is set as genesis_before_header as the ‘action’. It’s clearly picking up the page background styling. I am sure it’s somehow being overridden by other coding. I put the styling at the end of the CSS – was I to put it earlier on? It’s kind of in the write place, but not within some loop I think that links it correctly. I am using Streamline Pro – would that make a difference?
        sorry for all the Qs!

        • says

          Hey Liz,
          It looks like you added the styles in a media query section, which only gets applied when viewing the site at that screen size. Move it out of the media query and at the end of your regular CSS and that should do it.

          Carrie

          • says

            Hi Carrie,
            Thanks for the last input, and yes, it’s now showing in the right place. Just a styling issue now – am trying to get it to be the 760px width of the site inner, not full width. I tried placing .utility-bar, width and float css in various places but really not sure about it as ended up with the bar centre to left, and leaving a gap right! The last bit of the jigsaw! If you’ve time to lend a (final!!) helping hand?

  14. says

    Carrie, all done and dusted; bar correct and have bookmarked this post for the future. Thanks for taking the time to help; more than your call of duty. Really appreciate it. Have pointed more genesis newbies your blog’s way!

  15. says

    Hi Carrie,
    Me again but on about a different SP theme – Outreach Pro. I added the utility bar, all possible before / above header hooks and it conflicts with the 4 featured slots below the main slider. I lose one – nr 1 in fact! I removed the utility code and got it back. I can’t see how to add the utility bar without affecting the theme’s design. Any ideas what I can do to position it up top and not lose the lower page design area? Site is in local dev again but I think I explained OK above?
    Tnx!

  16. says

    Bit late here but I’ve followed the great tutorial, and I have the Bar working in Agency Pro. My only problem is the Title from a text widget font is the same color as the background! This wouldn’t be a problem if the body font wasn’t so small!

    Any idea how I can over ride the font widget settings for this widget only?

    • says

      Yep! Add a little custom CSS targeting that element and preface it with .utility-bar, like this (have not tested, but is the general idea):

      .utility-bar .widget-title { color: #fff; }

      If .widget-title isn’t the right element, use Firebug to see which one is correct.

  17. says

    Hi!
    Awesome tutorial! And nice that you also explained the why’s with the code :)

    Something that is going wrong on my site, is that the widgets I put in there, take the styling from the widgets in the sidebar. Which, obviously is to big :P

    Is there a quick remedy to this? Or do I just have to make a few styling rules to style the widgets the way I want them?

    Like: div.utility.searchbarwidget { style code}

    • says

      Hi,
      First, did you add the suggested CSS from the tutorial? If you have additional elements in the Utility Bar that’s picking up your sidebar styling, add some custom CSS as you suggested.

      Grab whatever CSS element you want to target and preface it with .utility-bar, like this:

      .utility-bar .whatever { }

      Cheers,
      Carrie

      • says

        Hi,
        Yes I have picked up the styling from you :) matched my theme perfectly haha. Metro theme :)

        I will try your suggestion. Thanks! I also love jetpack btw :) picked up that suggestion in the comment section

  18. says

    Thank you for this great tutorial!

    I’m completely green with using Genesis, and even I was able to take this and put 3 widgets in my subfooter area.

    The only problem is, the names of my widgets are coming out as my chosen ID: subfoot_left_widget, etc. instead of “Sub Footer Left Widget”

    Here’s my code:

    genesis_register_sidebar( array(
    ‘id’ => ‘subfoot_left_widget’,
    ‘name’ => __( ‘Sub Footer Left Widget’, ‘theme-prefix’ ),
    ‘description’ => __( ‘This is the left widget area below the footer.’, ‘theme-prefix’ ),
    ) );

    genesis_register_sidebar( array(
    ‘id’ => ‘subfoot_mid_widget’,
    ‘name’ => __( ‘Sub Footer Middle Widget’, ‘theme-prefix’ ),
    ‘description’ => __( ‘This is the middle widget area below the footer.’, ‘theme-prefix’ ),
    ) );

    genesis_register_sidebar( array(
    ‘id’ => ‘subfoot_right_widget’,
    ‘name’ => __( ‘Sub Footer Right Widget’, ‘theme-prefix’ ),
    ‘description’ => __( ‘This is the right widget area below the footer.’, ‘theme-prefix’ ),
    ) );

    I’m using Dynamik website builder child theme if that helps.

    Thanks in advance!

  19. says

    Sorry, me again.

    Actually, the widget areas aren’t showing up at all in my Widget’s option screen. What I was seeing was some deactivated widgets of the same name created by me via the Dynamik options.

    I think I’ll have to bother Dynamik support for this ;) Thanks anyway.

    • says

      Thought it would be fair to Eric to post an update here. He got back to me very quickly and I realized what I was doing wrong. I hadn’t selected the option to allow the custom functions.php code I was using to affect the WordPress admin / dashboard. That’s why the widgets weren’t showing up. It is something of a safety feature to keep greenies like me from breaking a site ;)

      I’ve said it elsewhere, but I’ll say it here for the benefit of others, Dynamik Website Builder and the Genesis Extender Plugin are amazing and must-have tools for those working with Genesis.

  20. George says

    Such a usefull post! I was searching about a week to find how to add a widget area at the home page too!

    Can you please show me the way to have this widgets appear only at the homepage? Thanks in advance!

  21. says

    Thank you so much! I absolutely love your blog. This post not only helped me with a utility bar but explained it in a way that I actually learned a new skill. I can’t wait to see what other gems you have on here!

    Warmly,
    Jennifer

  22. says

    this did not work for me in Magzine pro. When it kinda worked the right widget appeared on left hand margin. thinking I had to have a left hand widget to push it over I added a search box widget but they got intertwined within each other margin left.

  23. says

    I did what you tutorial showed but the widgets don’t show on the widgets page. Please help. I’m working with Genesis and Dynamik.
    Thanks

  24. says

    Hi, I am an absolute newbie at this and I really wanted a bar above my header, but I added your code to functions.php and now my site is broken. I really don’t know why this happened — I also don’t know how to reverse what I did. Anyways, after your first two steps, both widgets were showing up in the middle of the top (not left and right)…. Don’t know why the discrepancy. Am I supposed to add them in different areas of functions? I was just adding onto the bottom. Thanks for any advice. I really appreciate your well-written tutorial!!

    • says

      Hi there,
      If you’re new to editing code in WordPress, please take a moment to read this post first!

      There are two components to making the Utility Bar work – first the code you’re adding to functions.php, second the style you’re adding in to style.css. The style part is where you’ll get the left/right issue fixed.

      Cheers,
      Carrie

  25. says

    I recently discovered your site and I’m seriously glad I did. Coming from a little background in programming many! years ago, I often understand the concept yet don’t know exactly how to implement it in web programming.
    You have a talent for good explanations.
    Thanks for this and other insight into Genesis. Very much appreciated.

  26. says

    Hi Carrie, I tried following your tutorial to create the utility bar for a site that I am starting to build with the Parallax Pro theme and it doesn’t seem to work. Here is the site address: http://www.engagedsmb.com

    Not sure what I’m doing wrong.
    Kurt

    • says

      Hi Kurt,
      Parallax has the primary nav unhooked from it’s original location and then re-hooked above the header. Try adding the Utility Bar code at a higher priority to bring it in before the primary nav.

      add_action( 'genesis_before_header', 'utility_bar', 5 );

      Since that’s a sticky nav on Parallax, you’ll need to determine whether you want the Utility Bar to also be sticky and add your styles accordingly. Because the primary nav is absolute positioned, you may need to edit those styles, too.

      Cheers,
      Carrie

  27. jw says

    Hi – great tutorial – just wondered if there’s a way to get this working on Centric Pro?

    Tried all of the above suggestions for priority but I cant work out the issue. It places the utility bar underneath the site header. Although I am slightly confused about the header naming in this theme

    I guess its JS ?? Or the RHS custom menu limitation?

    Any help would be appreciated as Centric Pro only has one default menu in the custom menu and I need to add this in

    Many Thanks

  28. mike loewenberg says

    Hi Carrie. I’m using the utility bar on my client’s site with parallax. ive made the bars 10%/90% and it shows when the
    .site-header {
    position: static;
    }

    when i change it to fixed to keep the header sticky, the new widget goes away. i put this in the css but the widget doesnt show:

    .site-header {
    position: fixed;
    }

    .utility-bar {
    position: fixed;
    }

    .parallax-home .site-inner {
    margin-top: 0;
    }

    i’m having trouble getting my head wrapped around this to make the widget show and keep the header and the widget bar sticky. the widget is at priority 5 and it loads fine when the site-header is positioned as static.

    the site is in a sandbox. http://emperorofthefreeworld.com/ak

    thanks! btw…. i love your site and the office hours!

    • says

      Hey Mike,
      A couple of things going on… If you want to Utility bar to sit above of the sticky header, you’ll want to bump the header down a bit so the Utility Bar can fit. For example:

      .site-header { top: 30px; }

      Otherwise, if you want the Utility Bar and the site header to sit on top of each other (think layers), you can play with the z-index property to adjust “who’s on top” (not to be confused with “who’s on first”). ;)

      • jw says

        Hooray, it works on centric pro if you use
        .site-header {
        position: static;
        }

        Any suggestions on getting this working with the centric pro menu as sticky (site shrink i think)? Have tried disabling site shrink, no change..tried replacing the entire menu with a responsive one but over my head

        many thanks

        Its a local dev site so no link im afraid

        • paginapress says

          Thanks Carrie for this post! I have tried to do this with Centric Pro theme, adding the code that jw said. It works, but the problem is that if you set up a static position, the header looses the shrink effect. Do you have any solution for that?

  29. says

    Hi Carrie – I tried this but now I am getting a Parse error

    syntax error, unexpected ‘}’ in /var/sites/r/rowntreemedia.com/public_html/wp-content/themes/modern-portfolio-pro/functions.php on line 185

    I am using Portfolio Pro.

    It appeared to work the first time but the widgets had no styling (I had also added the css) and both appeared stacked on the left hand side above the header so I pulled it out. Then I got this error, which appears even after I reinstated your code.

    Now, even when I replace the php code (without your bits) with my backup (saved on Textwrangler) I get the same error.

    Can you help? I’m new to php etc and am now stuck.

    Really want the utility bar but now my priority is to fix the site.

    Thanks and much obliged – Naomi

    This is what I pasted in at the bottom of my functions.php:
    /** Register Utility Bar Widget Areas. */

    genesis_register_sidebar( array(
    ‘id’ => ‘utility-bar-left’,
    ‘name’ => __( ‘Utility Bar Left’, ‘theme-prefix’ ),
    ‘description’ => __( ‘This is the left utility bar above the header.’, ‘theme-prefix’ ),
    ) );

    genesis_register_sidebar( array(
    ‘id’ => ‘utility-bar-right’,
    ‘name’ => __( ‘Utility Bar Right’, ‘theme-prefix’ ),
    ‘description’ => __( ‘This is the right utility bar above the header.’, ‘theme-prefix’ ),
    ) );

    add_action( ‘genesis_before_header’, ‘utility_bar’ );
    /**
    * Add utility bar above header.
    *
    * @author Carrie Dils
    * @copyright Copyright (c) 2013, Carrie Dils
    * @license GPL-2.0+
    */
    function utility_bar() {

    echo ”;

    genesis_widget_area( ‘utility-bar-left’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );

    genesis_widget_area( ‘utility-bar-right’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );

    echo ”;

    }

    • says

      HI Carrie – Sorry for runaround. I have uploaded a backed up copy of functions.php so the site is back online. (phew!) I would still like your wonderful utility bar tho, and wondered why it did not work for me when I first put the code in. I’ll try again and if no joy I’ll get back to you. Naomi

      • says

        Hi Naomi,
        I’d recommending making additions to functions.php at the very end of the file, so you can make sure you’re not accidentally inserting in the closing bracket } for another function.

        A couple of resources that might help: Editing Your WordPress Site (especially the part about using a text editor) and PHP Code Validator (know before you put it in your functions if it’s syntax-error-free).

        Cheers,
        Carrie

        • says

          Thanks, Carrie. I put the code back into functions.php carefully and there were no errors. Same for the css you provided. However, the widgets both appear on the left hand side – you can see them as ‘Left’ and ‘Right (on my site), and no styling. Am I right in thinking that I should add text widgets to them or am I missing the point? Kind regards, Naomi

  30. says

    Hi Carrie,

    I have been trying to figure out how to do exactly what this tutorial teaches to do for awhile now! I unfortunately have had the same problem a few other people have. I entered all of the code in correctly (functions.php code , and style.css code) and anything I place inside of the utility bar widgets ends up on the left hand side, and underneath my secondary navigation menu.

    I am using Lifestyle Pro and am wondering is there something else I need to do to get them in the correct place, or am I screwed? Thank you for any help!

    • says

      Hi Sean,
      You’re not screwed. :) Sounds like your CSS styles aren’t being picked up. Can you confirm that they didn’t accidentally get stashed within a media query? (Easy to do if you’re adding your CSS at the very end of style.css).

      Carrie

      • says

        I hope this isn’t to long, but here is how it looks near the bottom where I put it all… The media query is above, but it looks separated. Did I do this wrong?

        /*
        Media Queries
        —————————————————————————————————- */

        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (-moz-min-device-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min-device-pixel-ratio: 1.5) {

        .search-form input[type=”search”] {
        background-image: url(images/search@2x.png);
        }

        }

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

        .footer-widgets,
        .site-container,
        .wrap {
        max-width: 960px;
        }

        .content-sidebar-sidebar .content-sidebar-wrap,
        .sidebar-content-sidebar .content-sidebar-wrap,
        .sidebar-sidebar-content .content-sidebar-wrap {
        width: 688px;
        }

        .content {
        width: 580px;
        }

        .content-sidebar-sidebar .content,
        .sidebar-content-sidebar .content,
        .sidebar-sidebar-content .content,
        .site-header .widget-area {
        width: 380px;
        }

        .footer-widgets-1,
        .footer-widgets-2,
        .footer-widgets-3,
        .home-bottom-left,
        .home-bottom-right,
        .sidebar-primary {
        width: 272px;
        }

        }

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

        .footer-widgets,
        .site-container,
        .wrap {
        max-width: 772px;
        }

        .content-sidebar-sidebar .content-sidebar-wrap,
        .content-sidebar-sidebar .content,
        .content,
        .footer-widgets-1,
        .footer-widgets-2,
        .footer-widgets-3,
        .sidebar-content-sidebar .content-sidebar-wrap,
        .sidebar-content-sidebar .content,
        .sidebar-primary,
        .sidebar-secondary,
        .sidebar-sidebar-content .content-sidebar-wrap,
        .sidebar-sidebar-content .content,
        .site-header .widget-area,
        .title-area {
        width: 100%;
        }

        .site-header {
        padding: 24px;
        }

        .header-image .site-title a {
        background-position: center !important;
        margin: 0 0 16px;
        }

        .genesis-nav-menu li,
        .site-header ul.genesis-nav-menu,
        .site-header .search-form {
        float: none;
        }

        .genesis-nav-menu,
        .site-description,
        .site-footer p,
        .site-header hgroup,
        .site-header .search-form,
        .site-title {
        text-align: center;
        }

        .genesis-nav-menu a {
        padding: 16px;
        }

        .site-header .widget-area {
        margin-top: 16px;
        }

        .site-header .search-form {
        margin: 16px auto ;
        }

        .genesis-nav-menu li.alignleft,
        .genesis-nav-menu li.right {
        display: none;
        }

        .entry-footer .entry-meta {
        margin: 0;
        padding-top: 12px;
        }

        .home-bottom-left,
        .home-bottom-right {
        width: 332px;
        }

        .footer-widgets-1 {
        margin: 0;
        }

        .site-footer {
        padding: 24px;
        }

        }

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

        body {
        font-size: 14px;
        }

        .site-container {
        padding: 20px 5%;
        width: 94%;
        }

        .five-sixths,
        .four-sixths,
        .home-bottom-left,
        .home-bottom-right,
        .one-fourth,
        .one-half,
        .one-sixth,
        .one-third,
        .three-fourths,
        .three-sixths,
        .two-fourths,
        .two-sixths,
        .two-thirds {
        margin: 0;
        width: 100%;
        }

        .site-title {
        font-size: 32px;
        }

        .header-image .site-title a {
        background-size: contain !important;
        }

        .genesis-nav-menu a,
        .nav-primary .sub-menu a {
        font-size: 12px;
        padding: 12px;
        }

        .nav-secondary a,
        .nav-secondary .sub-menu a {
        font-size: 11px;
        padding: 10px 8px;
        }

        .genesis-nav-menu .sub-menu .sub-menu {
        margin: -31px 0 0 199px;
        }

        .nav-primary .sub-menu .sub-menu {
        margin: -36px 0 0 199px;
        }

        .entry-meta .entry-tags {
        clear: both;
        float: left;
        }

        .entry-meta .entry-comments a {
        margin: 0 0 10px;
        }

        .lifestyle-pro-home .featuredpost .alignleft,
        .lifestyle-pro-home .featuredpost .alignright {
        float: none;
        margin: 0 auto;
        }

        /* Utility Bar
        ——————————————— */

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

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

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

        .utility-bar-left,
        .utility-bar-right {
        width: 50%;
        }

        .utility-bar-left p,
        .utility-bar-right p {
        margin-bottom: 0;
        }

        .utility-bar-left {
        float: left;
        }

        .utility-bar-right {
        float: right;
        text-align: right;
        }

        .utility-bar input[type=”search”] {
        background: inherit;
        padding: 10px 0 0;
        padding: 1.0rem 0 0;

        }

        }

        • says

          The give-away is that extra closing curly bracket on the end, which is the closing bracket for

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

          Move that final } up above the Utility Bar styles and that should fix it.

          FWIW, I can’t recommend strongly enough using a syntax-highlighting editor and properly formatting/indenting code – it’ll make those mistakes easier to catch. :) You can read more on that here.

          • Andytc says

            Hi , Thanks for the Tut on the utility bar. :)

            Can you tell me how to fix it’s width to match the content area of the site ? , i’m using the fluid layout on the header and the right and left utility areas go full width ?

            On the utility theme demo it looks the way i would like it with the utility content matching the main site content.

            Any help appreciated

  31. mariarobertson324930330 says

    Thanks Carrie, such a good post … something I have been looking for for days. Nearly there with it but two things I am scratching my head with a little.

    * When I add the code to Executive Pro theme in Extender ( Custom Functions ) the widgets don’t show up in Appearance > Widgets. Any previous knowledge of this ?

    * The widgets do appear when i add to the ‘actual’ functions.php and upload it ( hurray ) but visually the bar is restricted to within the content area, I would like it to run full width. My guess is I somehow shift it out of the content area but I am not sure how. Can you help ?

    Sorry for the basic questions, I am a bit of a novice, enjoying the challenges and post like these are invaluable. Thank you.

    Maria

    • says

      Hey Maria,
      So glad the posts are helpful! Regarding your first issue, make sure that you’ve checked the checkbox in Extender to “affect the admin area” – If that’s unchecked, any code that would execute in your dashboard (i.e. Appearance > Widgets), won’t run. That feature is designed to help folks from accidentally white screening the admin, but unless you do it that way (or put it in functions.php as you discovered), it won’t work.

      On the second question, do you have a link to your site? You can probably remove the wrap and that’ll remove the constriction.

      So, on line 11 of the code above, remove <div class="wrap"> and on line 23 remove one of the </div> tags.

      Cheers,
      Carrie

  32. Cam says

    Hi Carrie,

    Firstly, thanks for the great tutorial. Worked a treat and was exactly what a needed after a client request!

    Just had a quick question regarding formatting. When using multiple widget in the widget area e.g “utility right” the inserted widgets stack one on top of each other by defaut.

    I’m wondering what CSS would be used to make them align horizontal? E.g sit side-by-side

    I’ve been trying to sort this myself but I just can’t get them to sit side-by-side

    Any help from anyone would be most appreciated!!

    Thanks
    Cam

  33. mariarobertson324930330 says

    Hi Carrie, your replay above was perfect and sorted things for me. The widgets showed when I clicked ‘show on admin’ – great, simple when you know how. I adjusted the code to ‘genesis_before’ in stead of ‘genesis_before_header’ and it jumped out of its constraints. It may have been because I had the static home page set as a content page. Many many thanks for you help with this. Maria

  34. mariarobertson324930330 says

    Hello Carrie, all going well with adding customisations thanks to this tutorial. I have achieved the Utility bar across the top of the page with a primary nav and social media – I would like ( if at all possible ) the utility bar to work within the responsive framework.

    http://www.tpiver5.definemedia.co.uk/

    I have added to my css and this works beautifully with the .wrap div.

    .utility-bar .wrap {
    width: 1140px;
    margin: auto;
    }

    I thought this would work for the responsive part, but it appears not to, any suggestions appreciated if its fairly obvious to you what I am doing wrong.

    I have simply added this to the media queries that are already in place for this theme.

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

    .utility-bar .wrap {
    width: 1023px;
    margin: auto;
    }

    }

    Thanks in advance for any help. Maria

  35. says

    I just tried following this tutorial, but I must be missing something —

    dev.clarkscondensed.com

    I was trying to put a menu bar on the utility left and a search bar in the utility right, and what you see now is the result. Any ideas?

    • says

      Hi Katie,
      Be sure to read through the comments – there are a lot of troubleshooting tips in them. If you’ve tried everything suggested and still have problems, let me know.

      Carrie

  36. says

    Hi Carrie, I have come a long way with this and very happy with the results – so appreciated. My last hurdle is making it responsive. I have tried what I thought would work.

    utility-bar {
    background-color: #333;
    border-bottom: 1px solid #ddd;
    }

    .utility-bar .wrap {
    width: 1140px;
    margin: auto;
    }
    .utility-bar-left {
    float: left;
    width: 60%;
    }
    .utility-bar-right {
    width: 40%;
    float: right;
    }
    My rudimentary logic thought this would work for responsive, but unfortunately not. I wonder if I am doing something really really silly here. I can’t seem to get past this, or maybe I am trying to do something that can’t be done.

    @media only screen and (max-width: 1023px) {
    .utility-bar .wrap {
    width: 1023px;
    margin: auto;
    }
    }

    @media only screen and (max-width: 800px) {
    .utility-bar .wrap {
    width: 800px;
    margin: auto;
    }
    }

    Apologies for posting this question again, but any help is very much appreciated.

    Many thanks, Maria

  37. says

    Just to follow up I finally got my utility bar working exactly as I wanted – a real novice mistake. I needed to use:

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

    and not

    .utility-bar .wrap {
    width: 1140px;
    margin: auto;
    }

    what a numpty ! Ah well got there finally, the most pain the biggest gain sometimes. Thanks again for the great tutorial – any probs were down to my inexperience. But thought this may help if anyone else reaches this impasse.

Trackbacks