How do I add a second menu to a page's header.php? - wordpress

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.

Related

Bootstrap navwalker not display nested subcategories

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>

Wordpress menu's class missing

Im starting with wordpress and I have a problem with a menu Im doing. In functions.php, I have this:
register_nav_menus(array(
'principal' => 'principal_bar'
));
Very simple. Now, in my header.php, I have this:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));
As you can see, Im (trying) to use bootstrap classes in my menu. The thing is that when I edit my menu in the wordpress visual interface, the menu_class of my menu is removed (in Inspector, the ul ends with no class), and obviously the visual aspect of my menu is totally broken. My answer, Did I miss something? All tutos give the same way to do menus, but mine is not taking the classes at all. Am I doing something wrong here? Or is a problem bootstrap-wordpress? I am really confused right now... Thank you very much for your help...
You missing some properties in you items_wrap, should be:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));

Link of wordpress menu item with submenu gets replaced with #

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.

Add PHP Code In Wordpress Menu

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()?>

Wordpress Custom Menu Widget and CSS Styling

When I add a custom menu to my theme via a widget I get this line of code:
<ul id="menu-insurance" class="menu"><li id="menu-item-294" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-294">test</li>
I need to remove the class="menu", but I can not figure out how this is getting added to my custom menu when I use a widget. This style is creating style issues in my theme.
How can I remove the class="menu" from this widget?
My register sidebar is like this, I am not sure if it is doing it or if the wordpress code looks for css styling for menu when you use the custom menu widget:
register_sidebar(array(
'id' => 'sidebar',
'name' => __('Main Sidebar'),
'description' => __('Sidebar used on most pages'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
The custom menus are (or should be) created in functions.php inside your them. Find a piece of code like this one, and check or add the menu_class parametter and set to "".
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => 'menu clearfix', // class of container
'menu' => 'The Main Menu', // nav name
'menu_class' => 'top-nav clearfix', // This is it!!!
'theme_location' => 'main-nav',
'before' => '', // before the menu
'after' => '', // after the menu
'link_before' => '', // before each link
'link_after' => '', // after each link
'depth' => 0, // limit the depth of the nav
'show_home' => '1', // show home link
'fallback_cb' => 'bones_main_nav_fallback' // fallback function
));

Resources