• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Genesis Mobile Responsive Custom Menu Widget

Genesis Mobile Responsive Custom Menu Widget

By Victor M. Font Jr.
April 10, 20141 Comment

Mobile Responsive Custom Menu Widget

Many Genesis Framework users opt to use the Custom Menu Widget in the Header Right Widget Area instead of the standard primary and/or secondary menu locations built into your theme if they are supported at all. The problem you will encounter with the Custom Menu Widget is that it does not generate a mobile responsive menu. This can be a big problem, especially with the vast numbers of mobile users accessing our sites. In fact, I've seen numerous questions in forums asking how to make the Custom Menu Widget mobile responsive. The questions I've reviewed have remained unanswered.

This tutorial is a direct result of a requirement for one of my clients, Blue Olive Strategic Solutions. I recently built a new child theme for one of Blue Olive's customers, American RX. The design required me to place the primary navigation menu in the Custom Menu Widget in the Header Right area. Blue Olive asked for a typical mobile responsive hamburger menu when viewed on small mobile screens. It took a while, but I solved the problem. This tutorial will teach you how to make the custom menu widget mobile responsive. It may not solve your problem completely, but it will certainly get you on the right track.

The crux of the problem lies in the fact that Genesis responsive menus require that the menu be assigned to the primary and/or secondary theme locations. When the markup is created, the HTML wrappers have the class of nav-primary or nav-secondary. It's relatively easy to hook into the primary or secondary navigation areas. But when the menu is generated in the Custom Menu Widget, it has a class called nav-header. There aren't any built-in hooks for the nav-header class, at least none that I can find.

Before we get into the code, there are a few things that need explanation. First, I use the Dynamik Website Builder from CobaltApps to build my child themes. The Dynamik Website Builder generates its own code to create mobile responsive menus. I generally choose a vertical toggle style menu. When using the primary and secondary menu locations, the generated code, inserts a section of div tags before the nav-primary and nav-secondary elements. These div tags are what drives the menu toggle.

Second, I am not providing the code generated by Dynamik Website Builder. There are dozens of examples and plenty of source code available for mobile responsive menus. You've probably already gotten your own favorite code that you use with your sites. This tutorial will point you in the right direction for integrating your own code so the Custom Menu Widget is mobile responsive.

Third, I am assuming that you do not have a menu assigned to your theme's primary location.

With those points out of the way, here's the code:

What we're doing here is to replace the genesis_do_header function with our own custom header function. This function is essentially the core genesis_do_header function with some slight modifications. What makes this code work for my theme is the last function, vmf_genesis_header_menu_wrap. The native genesis_header_menu_wrap function does one thing, it creates the HTML markup for any menu assigned to the Custom Menu Widget in the Header Right Area. The following is the code for the native genesis_header_menu_wrap function.

This is where the nav-header markup is created. In the customized code, I added some additional markup required by the Dynamik Website Builder code and also changed the menu markup from nav-header to nav-primary. This works great on the client's site. I hope it helps you move in the right direction with your theme.

  • 4shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn2
  • Print
  • SMS2

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Rasmus

    March 11, 2015 at 7:25 pm

    Thank you! I been looking for this! I hope it actually is exactly what I been looking for. I got a navigation in my header widget are on the right and just can’t seem to get the responsive menu to show correctly without the header nav dropping down on the actual content area of the page and the messing up the whole design of the site.

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....
We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.OkNoCookie policy