how to configure this type of menu

enter image description here

So I am trying to build this type of nav menu dynamically in WordPress:

I am somewhere in the ballpark with the code in header.php:

<!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                    <?php
                        wp_nav_menu(array(

                            'menu'              => 'top_nav',
                            'theme_location'    => 'primary',
                            'container'         => 'nav',
                            'container_class'   => 'navbar-collapse collapse',
                            'menu_class'        => 'nav navbar-nav navbar-right'
                        ));
                    ?>

In functions.php:

<?php
/**
 * UpAbility functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package UpAbility
 */

if ( ! function_exists( 'upability_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function upability_setup() {
    /*
     * Make theme available for translation.
     * Translations can be filed in the /languages/ directory.
     * If you're building a theme based on UpAbility, use a find and replace
     * to change 'upability' to the name of your theme in all the template files.
     */
    load_theme_textdomain( 'upability', get_template_directory() . '/languages' );

    // Add default posts and comments RSS feed links to head.
    add_theme_support( 'automatic-feed-links' );

    /*
     * Let WordPress manage the document title.
     * By adding theme support, we declare that this theme does not use a
     * hard-coded <title> tag in the document head, and expect WordPress to
     * provide it for us.
     */
    add_theme_support( 'title-tag' );

    /*
     * Enable support for Post Thumbnails on posts and pages.
     *
     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
     */
    add_theme_support( 'post-thumbnails' );

    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary', 'upability' ),
    ) );

    /*
     * Switch default core markup for search form, comment form, and comments
     * to output valid HTML5.
     */
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );

    // Set up the WordPress core custom background feature.
    add_theme_support( 'custom-background', apply_filters( 'upability_custom_background_args', array(
        'default-color' => 'ffffff',
        'default-image' => '',
    ) ) );

    // Add theme support for selective refresh for widgets.
    add_theme_support( 'customize-selective-refresh-widgets' );
}
endif;
add_action( 'after_setup_theme', 'upability_setup' );

function upability_register_custom_menu() {
    register_nav_menu('topnav', __('Top Nav'));
}
add_action('init', 'upability_register_custom_menu');

So in my wp-admin I have this:

but I am not sure where to go from here.

Read more here: how to configure this type of menu

Leave a Reply

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