Add CSS styles and target Bootstrap dropdown elements in WordPress

I need help to integrate CSS style and target Bootstrap dropdown elements in a WordPress theme that uses the navwalker plugin.

The purpose is to create a Bootstrap dropdown menu that stays open as a sub-menu in desktop views.

I have published a prototype with CSS embedded at:

The target project is at

Now that I have the prototype I do not understand how to include it within the WordPress/Bootstrap/navwalker environment.

My intention was to replace the bootstrap “dropdown” LI class with a “submenu” class, and style the sub-menu from the LI > UL element.

It does not look like my CSS naming method will work. Also, WordPress seems to create it’s own dropdown class via the admin-menu interface.

How do I re-factor my code and/or create hooks in WordPress?

Here are some questions:

Should I be modifying the
A. Create a function in functions.php?
B. Name the menu or add a class through the WordPress > Appearance > Menu interface?
C. navwalker HTML?


I found a tutorial at
How to Style WordPress Navigation Menus

This tutorial shows the following formatting:

#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

If I re-factor my CSS using this format, do I start by using “#primary” as the ID, from the WP Appearance Menu, or #top_menu from the navwalker HTML?
Should they both be named the same?

B2. Should I use

#primary ul ul {} //unordered list within an unordered list
#primary li {} // each navigation item


#top_menu ul ul {} //unordered list within an unordered list
#top_menu li {} // each navigation item

C2. Can I add a LI.submenu class and a UL.submenu-menu class to this navwalker array in HTML?

<?php /* Primary navigation */
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav navbar navbar-nav navbar-right',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())

If “dropdown” is a WordPress class as well as a Bootstrap class then how do I need to take that into account as I re-factor my code?

Please help.
Thank you in advance.

I did resolve this. My method was to look at the source code rendered by WordPress. When I did this I saw the WordPress was creating a .dropdown class on the UL UL element.

I re-wrote my css to target that class.

The result is here:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.