Customizr (nikeo)

Knowledgebase Docs » UberMenu 3
USEFUL? 6
UberMenu 3

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;
 }