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 are two entries to remove your primary navigation from it’s usual place just below the header, up into the header itself. Unless you’ve rearranged things, you’ll want to place these two entries within the utility_pro_setup() function inside the Utility Pro’s functions.php:

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.