• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Get 4 months free on a WP Engine shared annual plan to celebrate Web Week. CODE: WEBWEEK2020

Ginger Coolidge

Delivering WordPress Solutions

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

Remove Mobile Footer Menu In Utility Pro

Published: June 15, 2016 - Updated: November 29, 2016

image of a hamburger with a line through it and text saying No Hamburger in Footer

Not too long ago Utility Pro* had an update to version 1.3.0 that added the mobile “hamburger” or stacked menu to the footer navigation.  This tutorial will show you how to remove that mobile footer menu if you so desire.

footer menu of utility pro on mobile showing the new menu
While I was thrilled to incorporate the new 1.3.0 changes into my Utility Pro Developer starter theme, I was not thrilled at the change this made in my website’s mobile footer navigation.  Long story short, when I was building my site, I chose to display the footer navigation inline, meaning in a straight line horizontally on mobile devices, the same as it appears on larger screens.  If the screen shot above did this it would run out of room, or wrap the social site names and be visually hard to read.  On my site this wasn’t an issue since I opted to use only the icons for my menu items.

footer menu on gingercoolidge-com without the hamburger menu

Steps To Remove The Hamburger Menu

First, you’ll want to remove the hamburger mobile menu from the footer navigation. To do this you’ll need to comment out a block of code in the file js/responsive-menu-args.js. Specifically remove or comment out the second section for .nav-footer:

https://gist.github.com/gspice/07fe09976bfd284c20148fe348ca848f

 

Next, you’ll want to make a small CSS change so the footer navigation menu always remains on a single line. Look for this section in your style.css file:

/* Mobile Menu Toggle
--------------------------------------------- */
.nav-primary,
.nav-footer {
  display: none;
  position: relative;
}
  @media screen and (min-width: 1023px) {
    .nav-primary,    
    .nav-footer {
       display: inline-block;
  }
}

And remove .nav-footer from each of the sections, so your final result looks like this:

/* Mobile Menu Toggle
--------------------------------------------- */
.nav-primary {
  display: none;
  position: relative;
}
  @media screen and (min-width: 1023px) {
    .nav-primary {
       display: inline-block;
  }
}

 
That’s it! Hit refresh and you should no longer see the mobile menu appear at the bottom on mobile device screen sizes.

Pro Tip: If you are using the Sass developer’s version of Utility Pro, you’ll make the change above in the partial _navigation.scss

* There are affiliate links sprinkled throughout this post.

Filed Under: Tutorials Tagged With: Genesis, mobile menu, Utility Pro, WordPress

About Ginger Coolidge

I'm here to introduce you to quality, clean WordPress solutions with the Genesis Framework 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

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

Genesis Pro

30% Off First Year with Coupon Code: SP3FREE

Essence Pro

Mai Pro Law

Mai Pro Law theme mobile screenshot

Mai Pro Lifestyle

Mai Pro Lifestyle theme mobile screenshot

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.


© 2021 · All Rights Reserved · GSC Solutions LLC · Proudly Powered by WordPress & the Genesis Framework