Menu displaying as bullet points despite loaded library with Foundation

enter image description here

I am developing a website within the WordPress CMS framework and I started using the Bootstrap CSS framework, but then changed it up and started using Foundation CSS. All the files were generated with underscores.me skeleton framework. I have looked over the code to see if I am missing a library, but my experience is limited with Foundation CSS. This is what I am getting in the browser:

This is the header.php file:

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package UpAbility
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'upability' ); ?></a>

    <!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
    <!-- NAVBAR ====================================================================================== -->
    <div class="top-nav">
      <div class="row">
        <div class="columns large-6 medium-6">
            <ul id="menu-topmenu" class="top-list-right">
              <?php wp_nav_menu( array(

                         'theme_location'       => 'topnav',
                         'container'            => 'nav',
                         'menu_class'           => 'nav navbar-nav navbar-right'

                      ) ); 
               ?>
            </ul>
        </div>
      </div>
    </div>



    <div class="top-bar">
      <div class="top-bar-left">
        <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <?php
                wp_nav_menu(array(

                    'theme_location'    => 'primary',
                    'container'         => 'nav',
                    'container_class'   => 'navbar-collapse collapse',
                    'menu_class'        => 'nav navbar-nav navbar-right'
                ));
            ?>
        </ul>
      </div>
    </div>

</header>

    <div id="content" class="site-content">

This is the Navigation part of style.css:

/* Top Nav */

.top-nav {
    width: 100%;
    background: #219CD7;
    padding: 0;
    margin: 0;
}

.top-list-right {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    float: right;

    li {
        list-style: none;
        float: left;
        padding: 10px 15px;
        font-size: 13px;
    }

    a {
        color: #ffffff;
    }
}

/* Top Bar */

.top-bar {

}

This is the file structure:

This is the functions.php:

    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(
        'primary' => __( 'Primary Menu' ),'topnav' => __( 'Top Nav Menu' ) ) );
    // 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' );

add_action('init', 'upability_register_custom_menu');



/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function upability_content_width() {
    $GLOBALS['content_width'] = apply_filters( 'upability_content_width', 640 );
}
add_action( 'after_setup_theme', 'upability_content_width', 0 );

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function upability_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'upability' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'upability' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'upability_widgets_init' );

/**
 * Enqueue scripts and styles.
 */

function upability_scripts() {
    wp_deregister_script('jquery');
    wp_register_script('jquery','http://code.jquery.com/jquery-2.2.4.min.js', false, null);
    wp_enqueue_script('jquery');
}
if(!is_admin()) add_action('wp_enqueue_scripts','upability_scripts');


function upability_styles() {
    wp_enqueue_style( 'upability', get_template_directory_uri() . '/assets/css/foundation.css' );
    wp_enqueue_style( 'upability_icons', get_template_directory_uri() . '/assets/css/foundation-icons.css' );
    wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/style.css' );

    wp_enqueue_script('upability_js', get_template_directory_uri() . '/js/vendor/foundation.js');

    // wp_enqueue_script( 'upability-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    // wp_enqueue_script( 'upability-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'upability_styles' );

When I put on debug, I get this error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'upability_register_custom_menu' not found or invalid function name in /Users/danale/Downloads/mediafuel_workshop/wp-includes/class-wp-hook.php on line 298

So I may be mixing two different issues here. Mainly I am trying to figure out why my nav menus continue to show as bullet points?

Read more here: Menu displaying as bullet points despite loaded library with Foundation

Leave a Reply

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