Add Header Top Area Menu and Main Menu to Mobile Navigation in Qode Bridge

In the Bridge Child theme, you need to register a new menu. You can do this by adding the following to functions.php

                    

if(!function_exists('bridge_qode_theme_setup')) {
    function bridge_qode_theme_setup() {
		register_nav_menus(
				array('top-bar-navigation' => esc_html__( 'Top Bar Navigation', 'bridge')
				)
			);		
    }
    add_action('after_setup_theme', 'bridge_qode_theme_setup');
}

Now, navigate to Appearance -> Menus and assign a menu the “Top Bar” location. This will be the menu that you choose to show in the “Header Top Right” or “Header Top Left” widget area using the navigation widget. You will need to make sure that the Header Top area is enabled in the theme options under “Qode Options -> Header”

Then,  you will need to connect to your website by FTP. We need to add a file to overwrite the regular mobile menu code in the child theme.

Connect to your website by FTP and navigate to: /wp-content/themes/bridge-child

Now in the bridge-child folder, you are going to create a new series of folders name like this:

/framework/modules/header/templates/mobile-menu

In the mobile-menu folder, create a file called mobile-menu.php with the following code:

<nav class="mobile_menu">
<?php
    if(has_nav_menu('mobile-navigation')) {
        wp_nav_menu(array('theme_location' => 'mobile-navigation',
            'container' => '',
            'container_class' => '',
            'menu_class' => '',
            'menu_id' => '',
            'fallback_cb' => 'bridge_qode_top_navigation_fallback',
            'link_before' => '<span>',
            'link_after' => '</span>',
            'walker' => new BridgeQodeType2WalkerNavMenu()
        ));
		
		wp_nav_menu(array('theme_location' => 'top-bar-navigation',
            'container' => '',
            'container_class' => '',
            'menu_class' => '',
            'menu_id' => '',
            'fallback_cb' => 'bridge_qode_top_navigation_fallback',
            'link_before' => '<span>',
            'link_after' => '</span>',
            'walker' => new BridgeQodeType2WalkerNavMenu()
        ));
		
    } else{
        wp_nav_menu(array('theme_location' => 'top-navigation',
            'container' => '',
            'container_class' => '',
            'menu_class' => '',
            'menu_id' => '',
            'fallback_cb' => 'bridge_qode_top_navigation_fallback',
            'link_before' => '<span>',
            'link_after' => '</span>',
            'walker' => new BridgeQodeType2WalkerNavMenu()
        ));
    }
	?> 
</nav>

This should be your finished file path: /wp-content/themes/bridge-child/framework/modules/header/templates/mobile-menu/mobile-menu.php

Make sure you have spelled everything properly or else it will not overwrite the parent theme.
Now, you should find that your top bar navigation shows in the mobile menu under the main navigation item. You will have to use CSS to hide the top bar menu on your site though on mobile sizes.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *