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 );
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 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>
I am passing the arguments array to the header, like this:
<nav class="header__social-menu">
<?php
$args = array(
'theme_location' => 'social-menu',
'container' => 'ul',
'container_class' => 'header__social-list',
'link_before' => '<li class="header__social-item"><a href="#" class="header__social-link">',
'link_after' => '</a></li>',
);
wp_nav_menu( $args );
?>
</nav>
But the container, which is the ul element, is not getting the class "header__social-list" assigned to it, but getting the class "menu" instead.
Is it possible to actually change the class of the container in order to stick with the BEM methodology?
I was able to solved it by adding another agument, called "menu_class", so the code looks like this now:
<nav class="header__social-menu">
<?php
$args = array(
'theme_location' => 'social-menu',
'container' => 'ul',
'container_class' => 'header__social-list',
'menu_class' => 'header__social-list',
'link_before' => '<li class="header__social-item"><a href="#" class="header__social-link">',
'link_after' => '</a></li>',
);
wp_nav_menu( $args );
?>
</nav>
Not sure if i should leave the "container_class" argument there, but it is working with the "menu_class".
This is what the wordpress documentation says about the container argument for menus:
'container' (string) Whether to wrap the ul, and what to wrap it with.
Default 'div'.
So that's to wrap the already generated ul, and container_class is for that wrapper, not for the ul itself.
But you might want to use items_wrap instead:
'items_wrap' (string) How the list items should be wrapped. Default is
a ul with an id and class. Uses printf() format with numbered
placeholders.
see also https://developer.wordpress.org/reference/functions/wp_nav_menu/
You need to set the first string array as primary that is the default name. Don't change the name because it will not work properly.
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Menu', 'wp' ),
)
);
i have made a custom menu named "header-menu" and i call it in my header.php:
<?php wp_nav_menu( array(
'container' => '',
'theme_location' => 'header-menu'
) ); ?>
with
'container' => '',
i want to remove the menu wrapper, but the output still has this:
<div class="menu">
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</div>
but i want to get rid of the annoying
<div class="menu">
. how to do that?
It's not clear what you're actually doing here but if you want the container to go away you use:
<?php wp_nav_menu( array(
'container' => false,
) ); ?>
Review this page for more detail.
got it working now:
<?php $defaults = array(
'theme_location' => '',
'menu' => 'footer-menu',
'container' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="dl-menu">%3$s</ul>',
'depth' => 2
);
wp_nav_menu( $defaults );
?>
I'm trying to remove the wrapper from the wp_nav_menu() function.
I've passed container => false to the arguements array and added a hook in my functions.php, but it still shows the wrapper.
function my_wp_nav_menu_args( $args )
{
$args['menu'] = false;
$args['menu_class'] = false;
$args['container'] = false;
$args['container_class'] = false;
$args['show_home'] = true;
return $args;
}
Any ideas why?
Reading the codex: Function Reference/wp nav menu
You may need to set the Theme Location in your functions.php file and then assign your menu to it?
This is what is says in the codex:
In order to remove navigation container, theme location specified in
functions.php and used among arguments in function wp_nav_menu ( eg.
'theme_location' => 'primary-menu' ) must have a menu assigned to it
in administration! Othervise argument 'container' => 'false' is
ignored.
If you need to register a location you can use the following:
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'Your_Theme' ),
) );
Then pass it in the wp_nav_menu() function
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) );
Hope this helps!
I have passed null to container and menu is not wrapped in div tag.
wp_nav_menu(
array('menu' => 'Bočni',
'container' => null
)
);
I think the boolean data type it's not available for this Parameters, please read this Function Reference/wp nav menu
So the best way to remove this div wrapper replace it with ul, like this example
wp_nav_menu( array(
'menu' => 'header-nav_menu',
'theme_location' => 'header-nav_menu',
'container' => 'ul', //To replace div wrapper with ul
'menu_class' => 'YOUR CLASS'//Add classes to your ul
)
);
wp_nav_menu(array(
'container' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'footer-1',
));
An existing menu have to be associated to your location ('footer-1' in my example), otherwise, there is always a div wrapper.
In my case "container" => false doesn't work, It only works when you write
"items_wrap" => "%3$s" but it removes all wraps including <ul> if you want to remove <div> and have your menu wrapped in <ul> I recommend to do this way
wp_nav_menu(array(
'theme_location' => 'header_menu',
'menu' => 'header_menu',
'items_wrap' => '<ul>%3$s</ul>',
'container' => false,
'menu_class' => 'nav',
'list_item_class' => 'nav-item',
'link_class' => 'nav-link',
'menu_id' => 'menu-main-menu'
));