Offcanvas Menu

Hi Thierry, could you enlighten me as to how I could modify the Offcanvas menu behavior to "overlay" the page when it opens instead of pushing the content away when opening.

Thanks.

Hi Marc,

UIkit doesn't have a setting for that but you can prevent the body margin from animating by adding the following CSS in your child theme style.less or style.css (which ever stylesheet you decided to use for your project):

.uk-offcanvas-page {
    margin-left: 0 !important; /* Important is necessary since it overwrites CSS added via JS */
}

Happy coding,

Excellent, exactly what I needed! Thanks.

Menu sub-items don't show up in my Offcanvas page, is there something to add to enable this?

Is there an arrow on the right of your parent menu item(s) in your off-canvas menu?

No.

That is abnormal as nothing needs to be added. Is it also the case if you only enable Beans without child theme and no plugins activated?

With only beans, this seem to works fine... must have broken something with my child theme...

It could well be the case then. The way I like to debug is by process of eliminating..

So you could start by removing all your CSS and see if it works.

If yes then you know it is in your CSS/LESS so you can then remove bit by bit until you get to the source of the issue.

If not, you know it is not in your CSS/LESS and can apply the same process to your PHP.

Let us know how it goes,

OK, now I have the arrow, but the sub-items do not show when hovering.

I used the following jQeuery and it seems to only work once the page a parent menu refers to has been selected:

$('.menu-item-has-children').hover(
    function(){
        $(this).children('div').first().removeClass('uk-hidden');
    },
    function(){
        $(this).children('div').first().addClass('uk-hidden');
    }
);

Keep in mind that there isn't an over state on mobile and the off-canvas is primarily meant for mobile usage.

You will notice that if you are on one of the parent item page, that parent item in your off-canvas menu will be active and its sub-menu will be opened/displayed.

This is actually an intentional behaviour, here is why. If you add a link (href) to the parent menu item, the hover show the sub-menu dropdown on desktop which works fine. That said there isn't any hover state on mobile and some users want to have to parent linking to a page and have to sub-menu open only on that page.

What you need if your want your sub-items to show on click/touch is to only replace the parent items href with an # for the off-canvas menu. UIkit will then displays the sub-items on click/touch instead of going to the parent item link. You may add the code snippet below to your child theme functions.php which will automatically replace the href with am # for the off-canvas menu items and leave the desktop one as is.

add_filter( 'beans_menu_item_link_attributes', 'example_modify_menu_link_attributes', 10, 4 );

function example_modify_menu_link_attributes( $attributes, $item, $depth, $args ) {

 // Replace href with # if the menu type is offcanvas and the menu item has children.
  if ( beans_get( 'beans_type', $args ) === 'offcanvas' && beans_get( 'has_children', beans_get( 'walker', $args ) ) ) {
    $attributes['href'] = '#';
    }

 return $attributes;

}

I hope that makes sense,

Ahhh, that's what I was missing!

Thanks Thierry, you have been most helpful!

I am glad I could help 🙂 I gave you the PHP way but you can indeed also achieve the same result using jQuery which might be faster performance wise depending on the number of menu items you have. Here is the snippet you would use:

(function( $ ) {
    $( document ).ready( function() {
        $( '.uk-nav-offcanvas .menu-item-has-children > a' ).attr( 'href', '#' );
    } );
})( jQuery );

Cheers,

Nice, thanks.

I also found an easy way for the sub-menus to open automatically when hovering:

$('.menu-item-has-children').hover( function(){
    $(this).children('a:first').click();
});

Thanks for sharing 🙂

You might want to prefix the selector in your example with .uk-nav-offcanvas so that it only applies the the off-canvas menu.

Hey, Thank you both, it's just what I needed.

Hey,

i search for a solution when parents are linked pages. I whish a can add a toggle (icon + / -) to open the submenu and the parent keeps a url to go to parent page. Everybody a solution? Thanks.

A bit unrelated but on a recent build I used a modal instead of the offcanvas menu for that full screen overlay effect, worked quite well and straight forward.

functions.php:

// Remove offcanvas menu.
remove_theme_support( 'offcanvas-menu' );
/* Add Modal Navigation */
add_action('beans_content_append_markup', function(){ ?>

    <div id="gene-popup" class="uk-modal">
        <div class="uk-flex uk-flex-middle uk-flex-center">
            <div>
                <a class="uk-modal-close uk-close"></a>
                <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'primary',
                        'menu_class' => 'uk-nav'
                    )
                ); ?>
            </div>
        </div>
    </div>
<?php });

and styles.less:

#gene-popup{
    & > div{
        width: 100vw;
        height: 100vh;
        background: @pink;
        .uk-close{
            position: absolute;
            top: 30px;
            right: 40px;
            color: #fff;
            font-size: 2em;
            opacity: 1;
        }
        .uk-nav{
            li{
                padding: 20px 10px;
                a{
                    color: #fff;
                    font-family: 'tt_norms_bold';
                    text-transform: uppercase;
                    font-size: 2em;
                    letter-spacing: 10px;
                }
                &:hover{
                    background: rgba(256,256,256,0.1);
                }
            }
        }
    }
}

This is the actual use case here: https://generositycoffee.org.nz/