For users who wants to replace the header default menu navbar, the following tutorial with custom codes allows to install a Mega Menu plugin in quick steps. In the example, we use the Groovy Menu plugin for the custom menu header in our VIBRA Theme version 1.0.3.
1 – Install the Groovy Menu plugin and create a menu
2 – Edit functions file
Go to Appearance – Themes and enable the Child Theme, then “Theme File Editor” and edit the functions.php file of the Child Theme. Add this custom code and save it.
function vibrawp_sidenav_add_class_to_items_link() {
remove_filter('nav_menu_link_attributes', '__return_false');
}
3 – Create a custom header file
Then, on the child theme folder, create a header.php with this code
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php wp_head(); ?>
</head>
<body <?php body_class('bg'); vibrawp_fade(); post_class(); ?>>
<?php wp_body_open(); ?>
<!-- get navbar -->
<?php if ( function_exists( 'groovy_menu' ) ) {
// show menu plugin only if is active
groovy_menu();
} else {
// show the theme common navbar
get_template_part( 'template-parts/navbar/navbar' );
} ?>
<!-- sidenav responsive -->
<?php vibrawp_account_nav(); ?>
<!-- main container -->
<main <?php vibrawp_fixed_menu(); ?>>
<div class="container-general">
4 – Customize the menu on plugin settings and test on frontend
The recommendation is every user customize his own menu appearance on the respective plugin settings. We not provide support for third party plugins.
On the future we compatibilize all our themes with this option. Meanwhile, you can also test the Elementor integration checking this post.
In other cases you can request our assistance, we are glad to help you on any question.
