Remove Mobile Footer Menu In Utility Pro

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.

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.

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.

* There are affiliate links sprinkled throughout this post.