0

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

1
  • Is there any URL to see the demo?
    – Kumar
    Jul 7, 2021 at 7:06

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.