To prevent the theme from interfering on mobile, we’ll replace the theme’s menu system with UberMenu using the theme’s hook system.
1. Create a child theme
You’ll want to add code to your child theme to preserve it when updating. Therefore you’ll first want to create a child theme. Here’s a sample style.css you can use
/** * Theme Name: Customizr Child * Theme URI: http://presscustomizr.com/customizr * Description: Navigate to Appearance, Customize. Design in live preview, save and enjoy a beautiful, fast and responsive website compatible with all browsers. For developers, Customizr offers a well documented and modular code, easy to extend with hooks. * Version: 3.3.28 * Author: nikeo / sevenspark * Author URI: http://presscustomizr.com/ * Tags: gray, white, light, blue, red, yellow, green, purple, orange, black, one-column, two-columns, three-columns, left-sidebar, right-sidebar, fluid-layout, responsive-layout, custom-menu, custom-colors, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, sticky-post, post-formats, rtl-language-support, editor-style * Text Domain: customizr * Copyright: (c) 2015 Nicolas GUILLAUME (nikeo), Nice, France * License: GNU General Public License v2.0 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Template: customizr */
2. Replace the theme’s menu with UberMenu
In your child theme, create a functions.php
if you haven’t already
Add this PHP to the functions.php to remove theme’s menu and add UberMenu:
<?php add_action( 'wp_head' , 'replace_customizr_menu' ); function replace_customizr_menu(){ remove_all_actions ( '__navbar' , 30 ); add_action ( '__navbar' , 'inject_ubermenu', 30, 1); } add_filter( 'tc_menu_display' , '__return_false' ); add_filter( 'resp_menu_button' , '__return_false' ); function inject_ubermenu(){ ubermenu( 'main' , array( 'theme_location' => 'main' ) ); }
3. Align responsive toggle
If you wish to align the responsive toggle to the right, add this CSS in your CSS Tweaks:
.ubermenu-responsive-toggle{ float:right; }