I'm using bootstrap navwalker for a wordpress custom theme. I've added two subcategories to a menù element that is nested inside a main nav element, see the screen. I'm noticing that the two nested elements are not displayed, how I can fix this to obtain a 3rd level dropdown?
CODE
<div class="collapse navbar-collapse navbar-content" id="navbar-shop">
<?php
wp_nav_menu( array(
'theme_location' => 'woocommerce-nav',
'menu' => 'Woocommerce Menu',
'container' => false,
'depth' => 2,
'menu_class' => 'navbar-nav mr-auto',
'walker' => new Bootstrap_NavWalker(),
'fallback_cb' => 'Bootstrap_NavWalker::fallback',
) );
?>
</div>
Related
I'm trying to insert a second menu into the header file just for the front page. The primary navbar is hidden by default and appears when the user scrolls down past the hero area. I'm putting a another menu in the hero area of the front page that, in theory, should be taking the same data as the navbar.
Navbar works great. Links populate correctly. They all work. Groovy. The hero menu, on the other hand absolutely does not.
I registered the hero-menu in functions.php.
// This theme uses wp_nav_menu() in three locations.
register_nav_menus(
array(
'Primary' => __( 'main-menu'),
'Secondary' => __( 'footer-menu'),
'Hero' => __('hero-menu')
)
);
The php is basically a straight copy/paste of the functional main-menu navbar, except for removing the navbar classes and changing the theme location.
// Navbar Menu
<div class="collapse navbar-collapse col-4" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
. . . .
// Hero Menu
<div>
<?php
wp_nav_menu(array(
'theme_location' => 'hero-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 1,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
My menus are linked....
enter image description here
I initially tried linking my primary menu to it, and that failed. So I thought that maybe there was a problem with the menu linking to two theme locations, so I rebuilt the main menu as a second hero menu and linked that. Failed. I tried stripping the args down to nothing except the theme location. Fails. The php function itself is working, because if I turn fallback on, it does populate with the default, but not anything I'm actually wanting to populate it with. If I turn fallback off, it doesn't populate with anything.
Is there something here that I'm just missing?
I got it working. If anyone else has an issue like this, explicitly setting the 'menu' arg fixed it.
<?php
wp_nav_menu(array(
'menu' => 'hero-menu',
'theme_location' => 'hero-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 1,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
I'm assuming that indicates the GUI menu settings aren't functioning (or at least the option to link menus), which raises the question of why they're not working, but for the moment its working now.
i'm trying to add a class to the li elements in my wordpress wp_nav_menu. I followed a couple of answer on here but can only get part of it working. So for my nav menu, i have >
functions.php >
//REGISTER NAVIGATION MENU
function smtg_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'smtg_menus' );
This code adds nav-links-dropdown class to the drop down menu on categories.
function my_nav_menu_submenu_css_class( $classes ) {
$classes[] = 'nav-links-dropdown';
return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );
Header.php >
$args = array(
'theme_location' => 'header-menu',
'container' => 'nav',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => false );
wp_nav_menu( $args );
I have a total of 4 li elements in my main navigation, with only one of those li elements having a sub menu, aka dropdown.
I can't figure out how to add a class to the li that has a drop down in order to trigger the drop down menu.
Looking at the page source, i see >
<!-- START NAV INSIDE NAV BAR -->
<nav class="menu-header-menu-container">
<ul id="menu-header-menu" class="">
<li>Home</li>
<li>Categories
<ul class="sub-menu nav-links-dropdown">
<li>Cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
<li>cat6</li>
</ul>
</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
On the second LI element - I need to add the class cats-li-dropdown to it in order to display the drop down menu. I can't seem to figure out how to do this in php anywhere.
Right now I'm using jquery to add the class cats-li-dropdown to the 2nd element like so.
$('nav li:nth-child(2)').addClass('cats-li-dropdown');
How can I avoid having to use jquery to add a class to the second li element?
I already tried adding the class in wordpress in the menu options but it still comes out blank when i look at the page source.
This added nothing to the li element, even though it seems it should. Any other ideas?
For the custom css classes not showing issue, try adding menu parameter:
$args = array(
'menu' => 'header-menu',
'theme_location' => 'header-menu',
'container' => 'nav',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => false );
wp_nav_menu( $args );
I am using Bootstrap's navbar on my Wordpress menu. The main menu items are all linked to WP pages. One of these menu items have a submenu that consists of anchors on that page, but when I display the WP menu like this:
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
The item that has a submenu loses its href to a page and gets replaced with # instead. Any ideas on how to fix this? Thanks in advance.
i am trying to add a php code in wordpress menu. Here is the code in header.php
<?php wp_nav_menu(array('theme_location' => 'main-nav', 'sort_column' => 'menu_order', 'container' => 'ul', 'fallback_cb' => 'null')); ?>
I want to add this code near fourth menu item.
<?php my_bp_adminbar_notifications_menu()?>
trying to add a footer menu to my footer in WordPress, The menu is saved inside the database and I'm copying the same code from the header which is working perfectly. I can't see the error:
code is:
<?php
if ( has_nav_menu( 'footer_nav' ) ) {
wp_nav_menu( array('container' => '<ul>', 'menu' => 'Footer Menu', 'items_wrap' => '<li>%1$s</li>' ));
}
?>
any help would be great
You have to give the theme_location for footer_nav,
wp_nav_menu( array( 'theme_location'=>'footer_nav',
'container' => '<ul>',
'menu' => 'Footer Menu',
'items_wrap' => '<li>%1$s</li>' ));