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
Related
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
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 using a theme called "Venture" and created a child theme to edit the styling via CSS, however I am running into a bit of an issue. The navigation our client wants to use is available on top as part of the theme, as the main nav, but the footer menu/nav is a different styling altogether and seems to be wrapped by a PHP function or a widget, I can't really tell.
I want to to make it look like the one on top. However, no matter what I do in CSS it won't change, and I find that by adding more CSS code which is essentially already in the parent theme is redundant and unnecessary, since I can use them if coded correctly. How to solve this issue?
The site I am building is on a sub-domain on WP.
Ok so I figured out a great way to do this. Basically I created a footer.php file and added it to my child theme folder. I copied the code from the parent "footer.php" file and pasted to the Child version. Then I removed the guts of the menu where it inside of the It used to point to secondary menu, now it points to primary. Then I followed it up by styling with CSS. I renamed menu to menu_2 as follows:
<div class="menu_2">
<?php if (has_nav_menu( 'primary' )) {
wp_nav_menu( array(
'container' => 'menu',
'container_class' => '',
'menu_class' => 'dropdown',
'menu_id' => 'mainmenu',
'sort_column' => 'menu_order',
'theme_location' => 'primary'
));
} else {
echo '<p>Please set your Main navigation menu on the <strong>Appearance > Menus</strong> page.</p>';
} ?>
</div>