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' ),
)
);
Related
I'm having troubles removing the WordPress wrapper div from my wp_nav_menu(). I've passed container => false to my menu args but the div keeps displaying. I'm using the following arguments:
$defaults = array(
'container' => false,
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
I have also declared the menu in my functions.php file.
register_nav_menus( array(
'main-nav' => __( 'Main Nav', 'ldsshop' ),
));
I have used these arguments with previous themes with no problems, but in this instance the wrapper keeps displaying, and I'm at a point where I need some extra eyes and help, no doubt I've missed something.
Thanking you all in advance,
Stu :)
Use container empty like this
'container' => '',
So it will like this
$defaults = array(
'container' => '',
'theme_location' => 'menu',
'menu_class' => 'main-nav',
);
wp_nav_menu( $defaults );
It will work, even it's working on my hand.
Update About Solved This Question
Try to the following using array in wp_nav_menu
wp_nav_menu( array(
'theme_location' => 'menu',
'container' => '',
'menu_class' => 'main-nav'
) );
use same '' about container if false not to work
Here is an article finding some helpful
See more in the codex https://developer.wordpress.org/reference/functions/wp_nav_menu/
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'
));
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 very new to wordpress themeing . I am trying to create a Twitter Bootstrap menu to my newly created theme as below in header.php page.
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'navbar-collapse collapse',
'menu_id' => 'navbar',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
With the above codes, I am expecting to add a class to navbar-collapse collapse to ul, but instead it produces HTML as below :
<div class="navbar-collapse collapse"><ul><li class="page_item page-item-11"> etc. How can I add class ul ?
Check you've actually registered 'header-menu' via register_nav_menus.
Removing theme_location => 'header-menu' will resolve the issue until you've registered your navigation ID correctly.
You should have this in your functions.php
register_nav_menus( array(
'header-menu' => __( 'Header Menu', 'domain' ),
) );
Try checking out a function that's already been made like this one. It will create the correct syntax for the menu to work.
Due to the fact that no one solved your problem. I want to provide a solution for future users. The solution is in the container parameter of the wp_nav_menu function.
Documentation:
https://developer.wordpress.org/reference/functions/wp_nav_menu/
container string - Whether to wrap the ul, and what to wrap it with.
Default 'div'.
To make parameter menu_class add it`s valuse to correct element, in your case it is ul element, you have to define container parameter as div, like below. Then parameter container_class will have default class 'menu-{menu slug}-container' because it`s not have any value given. container_id parameter also will be empty becouse there is no value given.
$defaults = array(
'theme_location' => 'header-menu',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',
);
wp_nav_menu( $defaults );
Then menu_class and menu_id parameters will be added to the ul element and ul element will look this <ul id="navbar" class="navbar-collapse collapse">.
In case you don`t want to have div container delete container_class and container_id and leave container parameter with ul value like this:
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_id' => 'navbar',
'menu_class' => 'navbar-collapse collapse',
I'm working on a new wordpress site and I'm building it with the Foundation framework. I'd like to add the class "main" to the links in the navigation that is built with wp_nav_menu. Eventually, I'll probably want to add the class "has-flyout" to others. Any idea on how to do this? I'm assuming I need to extend Walker (or can I do this with 'items_wrap'?), but that seems like overkill.
Currently, I have:
wp_nav_menu( array(
'theme_location' => 'primary_navigation',
'container' =>false,
'menu_class' => '',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'items_wrap' => '<ul class="nav-bar">%3$s</ul>'
));
You could use:
wp_nav_menu( array(
...
'menu_class' => 'main-menu',
...
And in your CSS (if that is what you want) access it like so:
ul.main-menu li { background: white; }
To add your "flyout" list-items maybe you could look into superfish? That system automatically adds "sf-with-ul" classes to list-items containing dropdowns.
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'
));