Move Primary Navigation To Header Right in Utility Pro

For those of you smarties that have bought the *Utility Pro theme, you may recognize my name as the one that answers your support queries. If the same how-to question appears several times over it means we either need to update the documentation (if it’s a theme setup-type question) or consider writing a tutorial if it’s a customization request. I’m here today to offer the latter. The question received was:

Can I make the menu I’m using in the header-right widget area responsive? Meaning, can the menu be presented with a hamburger-stacked button that toggles a mobile menu like the primary nav?

The answer is yes and no. Yes, it’s possible but I’m suggesting a cleaner, more schema-friendly solution: instead of using the custom menu widget, let’s move the primary navigation menu up to the header right widget area. Ready? Let’s get started!

We will be making a small change to your functions.php file. If this is your first time down this road, I recommend giving this a quick read: Editing Your WordPress Site 101. At the very least, make sure you have a current backup (If you don’t have a backup solution, *ManageWP is great for this!) and some sort of file access such as FTP or your hosting account.

The first steps can be found in this tutorial from Brian Gardner, Reposition Primary Navigation, to move your primary navigation up to the header right area. In addition to the code snippet, he shares some history as to why *StudioPress chose to place the menu there in the majority of their themes. Also in this article you’ll see an entry that removes (unregisters) the Header Right widget area completely, meaning it won’t show on your Widgets screen of the WordPress dashboard. This step is optional. This might be the way to go on a client’s site so they don’t insert additional widgets there. Also, while you still have functions open, there is one more change to make – you’ll want to remove the nav entry from the genesis-structural-wraps array. You can comment it out or remove it completely. Why? And what heck is a structural wrap? The structural wrap is “essentially an element which acts as a container for content”, and often has styling associated with it that adds padding. In this case, we no longer need the padding that surrounds the primary nav:

add_theme_support(
    'genesis-structural-wraps',
	array(
	  'footer',
	  'footer-widgets',
	  'footernav',    // Custom.
	  'header',
	  'home-gallery', // Custom.
          'menu-footer',  // Custom.
	  //'nav',
	  'site-inner',
	  'site-tagline',
	)

Add Styling To Put Everything In Place

First, locate this section in your style.css file and remove or comment out. If you’re using the Developer’s Edition with Sass, this will be in _header.scss:

/* Full width header, no widgets 
.header-full-width .title-area,
.header-full-width .site-title {
  width: 100%;
}

 
Next, add the contents of the gist below to the bottom of your style.css file.

Wait! A few things to consider:

• Remember Utility Pro is mobile-first, so the initial title-area and header-right width values will be 100% which apply to mobile. For larger screens, the title-area and header-right widget area each were 50%. Here, I chose to set the width of the title-area (logo) to 40% and the nav-primary (now replacing the header-right area) to 60%. You may need to adjust these depending on your title/logo or menu width needs.
• I left the header background white, which means I inverted the background and font colors which were previously white on black. If your header background is a different color, you’ll want to change where you see background-color: #fff; (white) to match.
• I left the mobile menu as-is with a black background and white font color.
• For those using the Developer’s Edition of Utility Pro, you can either break out these styles into their respective partials, or create a new partial and add it to the end of your style.scss so they trump the default styles above.

 
That’s all there is to it! Have variations of this? Awesome, please share in the comments.

 
*There are affiliate links sprinkled throughout this post.