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:
http://craigwebbart.com/preblast/wp-content/themes/blast_wp_theme/
BS_open-drop_sub-menu_pattern_12.html
The target project is at http://craigwebbart.com/preblast
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?
How?
I found a tutorial at http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/
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
or
#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.