• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ginger Coolidge

Delivering WordPress Solutions

  • Home
  • Solutions
  • Blog
  • Gear
  • About
  • Contact

Move Primary Navigation To Header Right in Genesis Child Theme

Published: June 28, 2016 - Updated: March 20, 2022

small crane carrying worker to install sign on brick building

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, 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.

https://gist.github.com/gspice/88211c87d14b88b28e603818ba74ad5e

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

screen shot of utility pro using header right menu area

*There are affiliate links sprinkled throughout this post.

Filed Under: Tutorials Tagged With: Genesis, primary navigation, Utility Pro, WordPress

About Ginger Coolidge

I'm here to offer quality, clean-reading websites using WordPress that can serve you for the long haul. If you're not sure where to start, you're in the right place!   About Me

Reader Interactions

Comments

  1. Chuck Smith says

    March 10, 2018 at 04:22

    Having issues with the tutorial. This does not remove Primary Nav for some reason. It adds a second Primary Nav, but never removes the original nav. I have tested on live site and a clean install of Utility Pro on Desktop Server.

    //* Reposition the primary navigation menu
    remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
    //add_action( ‘genesis_header’, ‘genesis_do_nav’, 12 );

    Any help would be appreciated.

    Reply
    • Ginger Coolidge says

      March 12, 2018 at 09:40

      Hi Chuck,

      If you are seeing multiple navigation menus, it’s most likely one of two things: 1. Check to see if you still have a Navigation widget in the Header Right widget area, or, 2. Make sure you add your action hook entries within the main utility_pro_setup() function in the functions.php file. I’ve added a note about the code location to the tutorial.

      Reply
      • Chuck Smith says

        March 13, 2018 at 06:10

        Ginger,
        Thanks for the reply. It was the location of the action hooks.
        Once I moved to within utlity_pro_setup … everything works properly.

        Thanks again.

Trackbacks

  1. How to Move Primary Navigation To Header Right in Utility Pro | WPShout says:
    July 22, 2016 at 04:00

    […] framework, or are working with Carrie Dils’ Utility Pro theme specifically, check out his nice little tutorial from Ginger Coolidge on how to customize your header and move your Primary navigation. It’s a fairly easy change […]

    Reply

Share your thoughts... Cancel reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Primary Sidebar

Gravity Forms

WP Engine

Essence Pro

Mai Theme

mai theme image of a demo site

Keep In Touch

You betcha! I would be tickled pink send you my latest posts.

*I use affiliate links sprinkled throughout this site. If your click results in a sale, at no cost to you, I may earn a small commission.
To see a full list, go here to learn more.


© 2022 · All Rights Reserved · GSC Solutions LLC · Proudly Powered by WordPress & hosted on Flywheel