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 );
Related
I have two file first is header.php.
I want to add custom class in my menu but it's not working. If you have any solution please tell me. I am already before sometime. But now i am forgot.
$defaults = array(
'theme_location' => 'header-menu',
'container_class' => 'top-menu-container',
'container_id' => 'cssmenu',
'menu_class' => 'menu',
'menu_id' => 'menu-top-menu1',
);
echo wp_nav_menu( $defaults);
functions.php code is following
register_nav_menu('header-menu','Top Menu');
Your code is already working.. I guess you have done some other mistake as the parameter you have send and throwing the same 'menu class'
By the way you dont have to echo wp_nav_menu() function..
Furthur More: https://developer.wordpress.org/reference/functions/wp_nav_menu/
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 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'
I have a problem with a Wordpress website I'm creating for a church. They'd like a seperate part only their members can see. I installed the plug-in WP-Members and created two menus, one for guests (not-logged-in-users) and for users (logged-in-users). I put in some code into the header.php, telling it to show logged-in-users one menu and not-logged-in-users the other. So far so good.
Problem is that the styling changes when a user logs in. A not-logged-in-user sees the navigation menu the way it is supposed to be. When a user logs in, the sub-indicators disappear, auto width doesn't work and the slider, just beneath the navigation menu also magically stops working. This makes me believe it might be a conflict with two plug-ins, or something like that
Code i used to show guest one menu and users the other:
<div id="navigation" class="clearfix">
<?php
if ( is_user_logged_in() ) {
wp_nav_menu( array(
'theme_location' => 'main nav',
'menu' => 'logged-in-menu',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu sf-js-enabled sf-shadow',
'fallback_cb' => 'default_menu'
));
} else {
wp_nav_menu( array(
'theme_location' => 'main nav',
'menu' => 'logged-out-menu',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu sf-js-enabled sf-shadow',
'fallback_cb' => 'default_menu'
));
}
?>
</div>
The website is www.vineyardkollumerzwaag.nl/nieuw/
Username: Test
Password: test
When logged in I'm seeing a JavaScript error coming from the script /wp-content/mu-plugins/notes/admin-bar-rest.js - the error is that an Object does not have the method 'on'
Looking a bit closer, you are including jQuery version 1.6.2, .on() was added to jQuery in version 1.7 - try updating the version of jQuery included in your site to 1.7+ and that should fix the issue
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