I am trying to add a class to the default ul generated in a custom wordpress menu.
I have created the custom menu in the backend and set it up fine, after referencing the wordpress codex this is the code I am currently using:
<?php
if ( has_nav_menu( 'main-navigation' ) ) { /* if menu location 'main-navigation' exists then use custom menu */
wp_nav_menu(
array(
'theme_location' => 'Main Navigation',
'menu_class' => 'row',
'items_wrap' => '<ul class="nav">%3$s</ul>',
'walker' => '',
)
);
}
?>
This is generating a div with a class of "row" wrapping around my ul but no class is added to the ul itself. I have seen many people with this problem online but no solutions.
Thanks.
You can achieve this with jQuery by targetting the ul element and adding a class like this:
$(".row ul").addClass( "CLASS-HERE" );
Try this extension from GitHub. It allows you to use Bootstrap navigation components in WordPress with easy.
https://github.com/twittem/wp-bootstrap-navwalker
you can use parameter
'menu_class' => 'nav-menu'
Related
I have 3 menus created in WordPress and the main menu is retrieved using wp_nav_menu() . I also want to retrieve the other menu please guide me how to do so.
You need to pass it an args array, and declare the theme_location key.
wp_nav_menu( array(
'theme_location' => 'header_main'
) ):
and
wp_nav_menu( array(
'theme_location' => 'header_secondary'
) ):
To retrieve other menu, you need to pass argument menu with menu name like this:
wp_nav_menu( array( 'menu' => 'name of the menu' ) );
You are able to create custom menu in your theme. Add this code to the function.php of your theme.
function lanparts_menu_setup(){
add_theme_support('menus','woocommerce');
register_nav_menu('woocommercemenu','Woocommerce Menu Navigation');
}
add_action('after_setup_theme','lanparts_menu_setup');
for more detail that follow this link
I'm currently using JointsWP for a WordPress theme. I'm running into an issue where the parent links in my dropdown menu are not clickable.
I searched the Foundation forums and found this thread that I thought would be helpful. It mentions adding data-options="mobile_show_parent_link: true" to the nav class top-bar.
JointsWP doesn't use the nav tag for it's menu, but I did add it where I thought it should be, which is the ul wrapper in the /assets/functions/menu.php file like so:
// The Top Menu
function joints_top_nav() {
wp_nav_menu(array(
'container' => false, // Remove nav container
'menu_class' => 'vertical medium-horizontal menu', // Adding custom nav class
'items_wrap' => '<ul id="%1$s" class="%2$s" data-options="mobile_show_parent_link: true" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
'theme_location' => 'main-nav', // Where it's located in the theme
'depth' => 5, // Limit the depth of the nav
'fallback_cb' => false, // Fallback function (see below)
'walker' => new Topbar_Menu_Walker()
));
} /* End Top Menu */
However, this is not working.
I've also tried:
data-options="is_hover: false"
Does anyone have any ideas on how to make the top parent link clickable when the submenu is expanded in mobile for JointsWP?
Thanks!
I use WordPress 4.1.1 and want to apply custom CSS class to the root ul element. To render my menu I use wp_nav_menu function:
<?php wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'my-menu')); ?>
According to the Codex, I use menu_class option to customize ul class. Unfortunately, I have the following markup:
<div class="my-menu"><ul>.....</ul></div>
The root ul element does not have my-menu class.
I like to configure wp_nav_menu() to only output the li elements, allowing me to put any markup I need on the ul
<ul class="my-menu">
<?php
$args = array(
'menu' => 'top-menu',
'container' => false,
'items_wrap' => '%3$s'
);
wp_nav_menu($args);
?>
</ul>
I have been trying to theme my navigation to use the twitter bootstrap. I want it to look like the demo example of a fixed top banner as seen here http://getbootstrap.com/examples/navbar-fixed-top/
I have got it working but I do not like the way I have got it working!
wp_nav_menu(
array(
'container_class' => 'main-nav navbar-collapse collapse',
'theme_location' => 'primary',
)
);
The code above builds my navigation, as you can see besides the default I have added navbar-collapse and collapse so it styles it according to bootstrap. This is not really the issue. The issue is when this piece of code then generates the menu I do not know how to add a class to the UL it creates so below is how I have done it.
$(document).ready(function(){
if($("#menu-menu-1").length !== 0){
$(".menu").addClass("nav navbar-nav");
} else {
alert("no navigation system");
}
});
This works by detecting the UL when the code has made it because it has an id of #menu-menu-1 then it adds the necessary classes and it all works.
Finally the question!
Is there a way to do this more efficiently because this method is very Quick Fix style and doesn't seem like a trustworthy permanent method. the alert was just there for testing purposes so I knew if the script was running
wp_nav_menu() has options for both menu_id and menu_class. To add both to your menu, you would do something like the following:
$menu_args = array(
'theme_location' => 'primary',
'container_class' => 'main-nav navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-menu-1'
);
wp_nav_menu( $menu_args );
I am trying to alter the wp_nav_menu to output the html like the below example.
<div class="menu">
<ul id="menu">
The original output
<div class="menu">
<ul>
I cant do it with jQuery or javascript, Its have to be php code
wp_nav_menu accepts the key menu_id in its options array. Set it to the ID you want, e.g:
wp_nav_menu(array(
'menu_id' => 'menu'
));
You can explicitly set the id in the html by defining items_wrap, and make sure walker is not set to some custom function:
wp_nav_menu( array(
'theme_location' => 'main-menu'
'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>',
'walker' => '',
));
This is incomplete info; 1st attempt to use:
'fallback_cb' => false,
If you menu doesn't appear, that means you have not created any menu and that means its taking the fallback function take care for that.
So go and create a menu first. :D
Giving the ul an id that's the same as the class of its container is asking for trouble, but this should work:
<?php
function showMenu(){
$args = array(
'menu_id' => 'menu'
);
wp_nav_menu($args);
}
showMenu();
?>
The WordPress Codex has a page detailing all options for the wp_nav_menu() function: http://codex.wordpress.org/Function_Reference/wp_nav_menu