I am working on wordpress theme developement and navigation menus . But by default the menu items are shown in lists . I want to get menu items as buttons and want to make them dropdowns with bootstrap classes . plz help me
There easiest way to do this is to use off-the-shelf solution. There is a WP_Bootstrap_Navwalker class which extends WordPress' native Walker_Nav_Menu class and makes your Navigation Menus ready for Bootstrap 3. Download it from GitHub.
Second, make it available for WordPress. Add following to the functions.php:
<?php
require_once('path-to-the-directory/wp-bootstrap-navwalker.php');
Change path-to-the-directory/ to fit your needs.
Next, alter your wp_nav_menu() with the following code:
<?php
wp_nav_menu( array(
'menu' => 'header', // match name to yours
'theme_location' => 'header',
'container' => 'div', // no need to wrap `wp_nav_menu` manually
'container_class' => 'collapse navbar-collapse',
'container_id' => 'collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => false,
'walker' => new WP_Bootstrap_Navwalker() // Use different Walker
));
Note, that you don't need the <div class="collapse navbar-collapse" id="collapse-1"> anymore as it will be added by wp_nav_menu() with proper CSS classes and id.
Also, read the WP_Bootstrap_Navwalker README.md file carefully.
originally published here : Add Bootstrap dropdown class to a nav menu
Related
I'm using this theme for a site: http://demo.woothemes.com/?name=theonepager.
However, when viewing in a mobile or smaller view the dropdown navbar looks a bit plain and I'd like to change this. Is it possible to change the appearance of the navbar through the dashboard settings, or would I need to alter the css directly?
you can pass class or id of ul tag in wp_nav_menu hook, will change design view.
Ex:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'items_wrap' => '<ul class="myMenu" id="myCustomid">%3$s</ul>'
)
);
?>
i am using bootstrap in my WordPress custom theme but my navigation menu does not hide after I click it the second time. How to resolve the problem
I am using bootstrap 3.
Also I m using a walker for drop down menu here is my code
<?php // Loading WordPress Custom Menu
wp_nav_menu( array(
'container_class' => 'nav nav-pills navbar-collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'main-menu',
'walker' => new Cwd_wp_bootstrapwp_Walker_Nav_Menu()
) );
?>
why dont you use jquery to hide and show the drop down menu>
your drop down menu opens on class "open" so you might toggle the class as
<script>
$(".your_nav_bar_list_item_class").click(function(){
$(".your_nav_bar_list_item_class").toggleClass("open");
}):
</script>
I need to list my menu in the bottom of my WordPress site without sub menu. I have tried this but this one lists menu with sub menus:
wp_nav_menu(array(
'container_class' => 'class_name',
'theme_location' => 'primary'
));
You want to add 'depth' => 1 to that array you're passing. See http://codex.wordpress.org/Function_Reference/wp_nav_menu
The code you used...
wp_nav_menu( array( 'container_class' => 'class_name', 'theme_location' => 'primary' ) );
shows the dynamic Menus of a site.
From your admin panel "Appearance ยป Menus", just enable a new custom menu on the Primary Menu location. And add the pages/posts on to the menu as the main menu. Don't nest any sub menu. It'll solve your problem.
I am creating my wordpress theme with sub pages and their sub pages also, for this i create my own theme. now I manage these child pages from admin panel to show header navigation menu dropdown . but its not working , they show him in a line ,not drop down .so how can i show in dropdown in my header part.
my menu code is
<div class="nav">
<?php wp_nav_menu(array('menu' => 'topmenu', 'walker' => new description_walker(), 'menu_class' => 'nav', 'container' => false)); ?>
</div>
Its show 4 menu.
but I have sub pages in only 2 menu.
so how can i show that?
you are declaring twice ".nav" as a class, the first time you do it in here:
<div class="nav">
the second time you declare it in:
'topmenu', 'walker' => new description_walker(), 'menu_class' => 'nav', 'container' => false)); ?>
so basically you are asigning the class .nav both in the div and in the menu ul, which may create issues depending on yoru css.
I use this plugin for Dropdown menus: http://shailan.com/wordpress/plugins/dropdown-menu/ - it works perfectly and it has some nice effects you can use too, like a sliding down animation
I am including a custom menu in a wordpress theme - I want it to display the menu list items however, in the case that no items were added to the custom menu I want it to display nothing because I have a hard coded list item as well..
Here is the code I'm using
<ul>
<?php wp_nav_menu( array('menu' => 'Project Nav', 'container' => false, 'items_wrap' => '%3$s' )); ?>
<li>Back to Site</li>
</ul>
It works to display the custom menu as only list items inside the hard coded < ul > however, if the custom menu is empty it reverts to displaying the main navigation list items...
How can I have it either display the items if they're there, or display just the hard coded 'Back to Site' if the custom menu is empty?
Any help is appreciated.
Thanks,
Thomas
UPDATE: Found this out. Simple fix I overlooked in the Codex
<ul>
<?php $menu = wp_nav_menu( array( 'menu' => 'Commercial', 'container' => false, 'items_wrap' => '%3$s', 'fallback_cb' => false )); ?>
<li>Back to Main Site</li>
</ul>
Just needed to add 'fallback_cb' => false to the options.
Just needed to add 'fallback_cb' => false to the options.
If you pass 'echo' as a parameter and set it to false the function wp_nav_menu will return the code instead of echoing
$menu = wp_nav_menu( array('echo' => false, [...] ));
so you can check the content of $menu