Customize navigation layered off canvas

[Aft]

Hello,

I would like to customize the OFF CANVAS of NAVIGATION LAYERED ELEMENT on PRO theme.
I folowed this without success:

https://theme.co/apex/forum/t/how-can-i-add-some-html-in-mobile-navigation-menu-layered-or-collapsed/40545

I would like to add some html to the OFF CANVAS to show logo, icons, buttons, aditional texts, above and below layered menu.

Thank you.

[rad]

Hi Roman,

Thanks for reaching out.

The one on that thread is only applicable for the standard header, your sites use Pro’s custom header. Unfortunately, the off canvas section of the navigation layered element isn’t customizable.

Instead, you could use content area off canvas element, there, you could add your own element. Then use Ubermenu as your menu and add Ubermenu shortcode along with your HTML content.

Thanks!

[Aft]

Hi Rad, thank you for your suggestions.
Personaly I don’t like ubermenu at all. You have the most advanced header editor and I will try not to rely on other plugins. My intention is to create a custom shortcode where I will generate html and css similar to your layered menu. I’m trying to create a loop, but I don’t know how to call your menu. For example menu location, name, or slug? I just need a loop that returns the menu items.

[thai]

Hi There,

Please take a look at this functions: wp_nav_menu

• Here is an example to display the primary menu:

wp_nav_menu(array('menu' => 'Primary'));

• Here is an example to display the header menu location:

wp_nav_menu(array('theme_location' => 'header_menu'));

You need to create a menu location by using this function: register_nav_menu()

For more information, please take a look at this:

https://developer.wordpress.org/reference/functions/wp_nav_menu/

Hope it helps

[Aft]

Hello Thai,

Thank you for helping. I used my shortcode with wp_nav_menu, but for a reason I don’t understand the menu was shown outside of the “OFF CANVAS”.

The code below worked for me:

function create_custom_mobile_menu() {
$menuLocations = get_nav_menu_locations(); // Get your nav locations (set in our theme, usually functions.php)
$menuID = $menuLocations['primary']; // Get the *primary* menu ID
$primaryNav = wp_get_nav_menu_items($menuID); // Get the array of wp objects, the nav items for our queried location.
foreach ( $primaryNav as $navItem ) {
    $result .= '<li><a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a></li>';
}
return $result; }

add_shortcode('custom_mobile_menu', 'create_custom_mobile_menu');

Also I am able to customize the appearance of the menu.

[paul.r]

Hi,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. .

Thank you for your understanding.