Bootstrap Dropdown Menus not displaying the items within the dropdown in WordPress

I am working on a child theme and have added Bootstrap just before the generic wp_enqueue_style of my theme to the functions.php as it follows:

if ( ! function_exists( 'ghostpool_enqueue_child_styles' ) ) {     function ghostpool_enqueue_child_styles() {          wp_enqueue_script( 'bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', array('jquery'), NULL, true );                  wp_enqueue_style( 'bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', false, NULL, 'all' );                  wp_enqueue_style( 'ghostpool-style', get_template_directory_uri() . '/style.css', array(), AARDVARK_THEME_VERSION );         wp_enqueue_style( 'ghostpool-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'ghostpool-style' ), AARDVARK_THEME_VERSION );         wp_style_add_data( 'ghostpool-child-style', 'rtl', 'replace' );     } } add_action( 'wp_enqueue_scripts', 'ghostpool_enqueue_child_styles' ); 

Then I have added raw HTML in a row with 4 columns to each of the columns, as it follows:

<div class="dropdown">   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">     CHOOSE A GENRE   </button>   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">     <a class="dropdown-item" href="#">Action</a>     <a class="dropdown-item" href="#">Another action</a>     <a class="dropdown-item" href="#">Something else here</a>   </div> </div> 

My dropdown buttons are displaying correctly, however when I click on them, they don’t display what is inside the dropdown? Am I forgetting to add any special js in the functions.php? Am I missing something?

Multisite: menus can’t be added in child sites

It seems that we cannot add menus in child sites in multisite. Did anyone face this issue before?

I have the Menu container enabled in my functions.php

register_nav_menus(     array(         'primary-menu' => __( 'Primary Menu' ),         'secondary-menu' => __( 'Secondary Menu' )     ) ); 

I can add menus to the parent site. But I can’t do it in the child sites even though I can see the Menu container and the Create Menu button.

No menu is created when the Create Menu button is clicked. WordPress just refreshed the page and the menu I tried to create is not present at all.

I have inspected the database of my child site and I can’t find any row for nav_menu_item.

Any ideas?

EDIT:

I also found out that I cannot add any category or tag in my child sites. Why??

Conditionally open nested, product sub category menus based on is_product_category( ) – Woocommerce

I have a complex product category menu in my woo shop sidebar with lots of sub menus. When the current category is one of the parent menu items, the menu item changes style. But when the current category is one of the nested, sub categories, the menu is closed, hiding the active menu item.

How can I force the menu to open to the current sub category and inherit the active menu item styles?

Using backbone Javascript Client for menus

So I’m using the Backbone Javascript Client (https://developer.wordpress.org/rest-api/using-the-rest-api/backbone-javascript-client/) provided by WordPress and I am wanting to extend or pull in menus.

I don’t see items regarding menus there, does anyone know if you can extend backbone.js with WP to pull in menu items? All leads would be appreciated.

Two Menus gives me message “Text Duplicate”

My website has 2 menus: 1 is used for mobile devices and the other for desktop devices. When I test my SEO in "Seobility.net" I get the message "Text Duplicate". (Image attached) Is there anything I can do to indicate to the spider that one menu is for mobile and one is for the desktop? The mobile menu is located at top right of the website whereas the desktop menu is located at the side. Here is the code:

<nav id="main-nav" class="h-nav">           <div id="show-nav"><a href="#">Menu ☰</a></div>           <ul class="nav-menu">             <li><a href="https://www.tranquilhavens.com.au" class="current">Home</a></li>             <li><a href="dwarfmondo.html">Dwarf Mondo Grass</a></li>             <li><a href="dwarfmondotrays.html">Dwarf Mondo Trays</a></li>             <li><a href="koreangrass.html">Zoysia No Mow Pots</a></li>             <li><a href="nomowgrasstrays.html">Zoysia No Mow Trays</a></li>             <li><a href="dichondratrays.html">Dichondra Trays</a></li>             <li><a href="thymemagiccarpettrays.html">Thyme Trays</a></li>             <li><a href="corsicanminttrays.html">Corsican Mint Trays</a></li>             <li><a href="zoysiaexperiment.html">Zoysia Experiment</a></li>             <li><a href="contactus.html">Contact Us</a></li>             <li><a href="links.html">Links</a></li>           </ul>         </nav>         <!-- END: header -->         <div class="main clearfix">           <div class="sidebar">             <ul>               <li><a href="https://www.tranquilhavens.com.au" class="current">Home</a></li>               <li><a href="dwarfmondo.html">Dwarf Mondo Grass</a></li>               <li><a href="dwarfmondotrays.html">Dwarf Mondo Trays</a></li>               <li><a href="koreangrass.html">Zoysia No Mow Pots</a></li>               <li><a href="nomowgrasstrays.html">Zoysia No Mow Trays</a></li>               <li><a href="dichondratrays.html">Dichondra Trays</a></li>               <li><a href="thymemagiccarpettrays.html">Thyme Trays</a></li>               <li><a href="corsicanminttrays.html">Corsican Mint Trays</a></li>               <li><a href="zoysiaexperiment.html">Zoysia Experiment</a></li>               <li><a href="contactus.html">Contact Us</a></li>               <li><a href="links.html">Links</a></li>             </ul>           </div>           <!-- END: sidebar --> 

enter image description here

Browsers ruin password UX with dropdown menus. How can I fix it?

autofill dropdown ruining UX

FYI the image above was taken with autocomplete="new-password"

As you can see, the dropdown is covering the error message (which ends in “letters and numbers” (plus a few other error messages).

This error message is IMPORTANT, and the user MUST see it, so how do I hide the dropdown? The dropdown is preventing the user from seeing the message. You could say that “The dropdown is bad UX” in this particular circumstance

You could say to move the message below the field, but then we have the exact same problem, just from the other direction.

As far as I can tell, our solutions are:

  1. disable dropdown
  2. move message to a place where the dropdown won’t cover it (like a popup or to the side)
  3. Move the message so it is always displayed on the opposite side to the dropdown

Option 1 doesn’t work because we used to be able to disable the dropdown by setting autocomplete to "new-password" or "off" or "false" or whatever, but none of these things seem to disable the dropdown anymore.

Option 2 doesn’t really work because I want the message to be near the field to give the error message some context. I don’t really want a popup with the error message “You password is too short” because that seems like bad UX also. I guess I could move the error messages to the side of the password input, but that wouldn’t work on small devices that don’t have the screen width.

Option 3 also doesn’t seem very good because the error message is moving around based on the scroll position of the window, and moving text based on some arbitrary scroll line also seems like bad UX.

So yeah, I’m out of options, unless anybody can think of any?

Is this a browser problem? Or is there one simple trick I can use to get the good UX I desire?