WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'd like to show my users some features I offer if they register in a special nav bar. I've created this for a logged in version and a logged out version:

if ( is_user_logged_in() ) {
    $menu = wp_nav_menu( array( 'theme_location' => 'logged-in-menu', 'container' => '0', 'fallback_cb' => 'wp_page_menu', 'echo' => '0' ) );
    echo $menu;
    } else {
    $menu = wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => '0', 'fallback_cb' => 'wp_page_menu', 'echo' => '0' ) );
     <style>#menu-item-1046{opacity : 0.4; filter: alpha(opacity=40);}</style>
    echo $menu;

I'm trying to grey out (disable but leave visible) nav buttons by ID. Obviously my CSS in there works but doesn't disable the button...

I tried <script>$('#menu-item-1046').button('disable');</script> But I've barely dabbled in jQuery as of now.

share|improve this question
Pure CSS or Javascript questions are off topic per the faq, and that seems to be what you are looking for. A pure CSS or Javascript solution would provide no real security anyway. Anyone wishing access could undo anything you can do with CSS or Javascript. Rather than "grey out" the links you need to actually remove them at the PHP level before the page prints. Also, since it would involve filters and walkers, that would not be off-topic. – s_ha_dum Mar 11 '13 at 4:17
This have already been answered: stackoverflow.com/a/577558/1329669 – Frederick Andersen Mar 11 '13 at 7:36
I don't understand why this one was close voted. Disabling shouldn't be done via CSS and there is a possible solution via wp_nav_menu(). – kaiser Mar 11 '13 at 13:18
What is that solution @kaiser, I also didn't specify that it needed to be CSS or JS. Tried to show what I've attempted first, then ask the community. I just needed a solution, PHP preferred. Thanks! – BenRacicot Mar 11 '13 at 13:26
A custom walker for example. There're plenty of answers here filed under walker. Just search through and update your question. – kaiser Mar 11 '13 at 13:28

Because the menu item is not button so you can't use .button(disable); function, combine this code with your above css:

jQuery(document).ready(function() {    
     $('#menu-item-1046').click(function(){return false;});
share|improve this answer
This answer was "automatically flagged a low-quality because of its length and content", which I am sure you don't want. Please try to add explanation to your answers rather than just post raw code. – s_ha_dum Mar 11 '13 at 4:28

When you look at the possible arguments, then you'll see that there's as well the option to add a custom nav menu walker class.

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    '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 );

The walker would be implemented like this:

$walker = new WPSE90265_Nav_Menu_Walker();

wp_nav_menu( array( 
    # ...
    'walker' => $walker
    # ...
) );

It should extend the default nav menu walker so you only need to overwrite those methods that you need to redefine:

class WPSE90265_Nav_Menu_Walker extends Walker_Nav_Menu
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
        if ( ! is_user_logged_in() )
            $output = str_replace( 
                ,'disabled class="'

        parent::start_el( $output, $item, $depth, $args, $id );

Note, that the disabled argument will only work for specific HTML elements/tags. Please do a search on which it works and alter your walker according to it. You could as well try to add an onClick="return false;" inside the walker if it's not possible to use such tags.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.