Custom CSS Nav Menu Style Not Being Applied

Question

I have created a plugin and custom CSS page to display a custom navigation menu on one page of my WordPress site. I am attempting to show the navigation menu using a Custom HTML block on the page of interest. Using Query Monitor, I can see that the style is being applied to the page, but the custom HTML never gets the style applied to it. Can anyone see what I am doing wrong?

Here's the PHP to enqueue my CSS:

function additional_stylesheets() {

    // wp_register_style( 'bt-wp-styles', get_template_directory_uri().'/bt-wp-styles.css'  );
    wp_register_style( 'bt-wp-styles', plugin_dir_path( __FILE__ ).'css/bt-wp-styles.css'  );
    wp_enqueue_style( 'bt-wp-styles' );

}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

My custom CSS:

/* bt-wp-nav */
.bt-wp-nav-menu,.bt-wp-nav-menu ul,.bt-wp-nav-menu li,.bt-wp-nav-menu a { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; }
.bt-wp-nav-menu ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 999; -webkit-transition: opacity .3s; transition: opacity .3s; }
.bt-wp-nav-menu li:hover > ul { left: 0; opacity: 1; z-index: 1000; }
.bt-wp-nav-menu ul li:hover > ul { top: 0; left: 100%; }
.bt-wp-nav-menu li { cursor: default; float: left; white-space: nowrap; }
.bt-wp-nav-menu ul li { float: none; }

/* sub width */
.bt-wp-nav-menu ul { min-width: 12em; -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.25); box-shadow: 2px 2px 2px rgba(0,0,0,0.25); }

/* center */
.bt-wp-nav-center { float: right; right: 50%; }
.bt-wp-nav-center > li { left: 50%; }

/* root */
.bt-wp-nav-menu a {
  padding: 0 10px;
  color: #5BC0DE;
  font-weight: normal;
  font-size: 16px;
  line-height: 40px;
  text-decoration: none;
}

/* root: active */
.bt-wp-nav-menu > li > .bt-wp-nav-active { background-color: rgba(0,0,0,0.05); }

/* root: hover/persistence */
.bt-wp-nav-menu a:hover,.bt-wp-nav-menu a:focus,.bt-wp-nav-menu li:hover a {
  background: #555;
  color: #FFF;
}

/* 2 */
.bt-wp-nav-menu li li a,.bt-wp-nav-menu li:hover li a {
  padding: 8px 10px;
  background: #555;
  color: #FFF;
  font-size: 12px;
  line-height: normal;
}

/* 2: hover/persistence */
.bt-wp-nav-menu li:hover li a:hover,.bt-wp-nav-menu li:hover li a:focus,.bt-wp-nav-menu li:hover li:hover a {
  background: #444;
}

/* 3 */
.bt-wp-nav-menu li:hover li:hover li a {
  background: #444;
}

/* 3: hover/persistence */
.bt-wp-nav-menu li:hover li:hover li a:hover,.bt-wp-nav-menu li:hover li:hover li a:focus,.bt-wp-nav-menu li:hover li:hover li:hover a {
  background: #333;
}

/* 4 */
.bt-wp-nav-menu li:hover li:hover li:hover li a {
  background: #333;
}

/* 4: hover */
.bt-wp-nav-menu li:hover li:hover li:hover li a:hover,.bt-wp-nav-menu li:hover li:hover li:hover li a:focus {
  background: #222;
}

/* vertical */
.bt-wp-nav-vertical { max-width: 220px; }
.bt-wp-nav-vertical ul { top: 0; left: -9999px; }
.bt-wp-nav-vertical li { width: 100%; float: none; }
.bt-wp-nav-vertical li:hover > ul { left: 100%; }

And the custom HTML snippet I'm trying to load on the page:

<nav>
  <ul class="bt-wp-nav-menu bt-wp-nav-center">
    <li><a href="#">Nav Link</a></li>
    <li><a href="#" class="bt-wp-nav-active">Nav Link</a>
      <ul>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a>
          <ul>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
            <li><a href="#">Sub Sub Nav Link</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Nav Link</a></li>
        <li><a href="#">Sub Nav Link</a></li>
      </ul>
    </li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
    <li><a href="#">Nav Link</a></li>
  </ul>
</nav>

Any help would be appreciated! Thanks!

Brian

Answer 1

Well, I found the solution. The problem was with the PHP code in the plugin itself. Here is the 'additional_stylesheets' function with the code that ended up working.

function additional_stylesheets() {

    // register and enqueue our style.
    wp_register_style( 'bt-wp-styles', plugins_url( 'bt-wp-styles/css/bt-wp-styles.css' ) );
    wp_enqueue_style( 'bt-wp-styles' );

}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

So, that's everything. The code works great now! Thanks for looking at my answer!

Brian