Grey out nav buttons unless is_user_logged_in()

Question

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>
    <?php
    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.

Answer 1

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;});
});

Answer 2

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( 
                 'class="'
                ,'disabled class="'
                ,$output
            );

        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.