Mobile navigation

Mobile – hamburger menu in Beans.

Above 960px the hamburger menu is hidden.

// Hamburger button hidden.
@media (min-width: 960px)
.uk-hidden-large {
    display: none !important;
}

On reaching width of 959px the regular menu is hidden:

// Regular menu hidden.
@media (max-width: 959px) and (min-width: 768px)
.uk-visible-large {
    display: none !important;
}

The hamburger menu shows up at 959px width.
The CSS code for the hamburger menu:

// Hamburger button.
.uk-button {
    -webkit-appearance: none;
    margin: 0;
    border: none;
    overflow: visible;
    font: inherit;
    color: #444;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 12px;
    background: #eee;
    vertical-align: middle;
    line-height: 30px;
    min-height: 30px;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
}

The CSS code on hover:

//Hover hamburger menu.
.uk-button:hover, .uk-button:focus {
    background-color: #f5f5f5; 
    color: #444; 
    outline: none;
    text-decoration: none;
}

It uses a fontawesome icon:

.uk-icon-navicon:before, .uk-icon-reorder:before, .uk-icon-bars:before {
    content: "\f0c9";
}

Renaming the word menu

To remove the word menu:

//Removes the word Menu from the hamburger
beans_remove_output( 'beans_offcanvas_menu_button' );

To rename the word Menu:

// Modify the Menu word after the Hamburger icon.
add_filter( ‘beans_offcanvas_menu_button_output’,
'modify_menu_prefix' );
function modify_menu_prefix() {
return ‘Mobile menu’;
}

The off canvas menu bar

CSS Code:

/* The off canvas menu bar */
.uk-offcanvas-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1001;
    width: 270px;
    max-width: 100%;
    background: #333;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    -ms-scroll-chaining: none;
}

The off canvas menu items/links:

/* All the menu items. */
.uk-nav-offcanvas>li>a {
    color: #7d1f1f;
    padding: 10px 15px;
}

/* Active menu item. */
html .uk-nav.uk-nav-offcanvas>li.uk-active>a {
    background: #1a1a1a;
    color: #a51818;
}

// Add uk-offcanvas-bar-flip so that it opens from the right.
beans_add_attribute( 'beans_widget_area_offcanvas_bar[_offcanvas_menu]', 'class', 'uk-offcanvas-bar-flip' );

Code snippets

As one clicks the parent of a submenu it automatically jumps to the page without showing the submenu children. To change the behavior so that clicking a parent of a submenu shows the submenu without jumping to it add the below code to the child theme functions file.

https://community.getbeans.io/discussion/offcanvas-menu/#post-558

// Show submenu on click of parent.
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;

}

// Remove offcanvas menu. Will not show the hamburger menu.
remove_theme_support( 'offcanvas-menu' );

https://community.getbeans.io/discussion/offcanvas-menu/

/* https://community.getbeans.io/discussion/offcanvas-menu/ 
Does not push the content when offcanvas menu opens. Add the following CSS class to your style.css. */
.uk-offcanvas-page {
    margin-left: 0 !important; /* Important is necessary since it overwrites CSS added via JS */
}

// https://community.getbeans.io/discussion/disable-sticky-menu-in-mobile-view/
// https://getuikit.com/v2/docs/sticky.html#responsive-behavior
beans_add_attribute( 'beans_header','data-uk-sticky',"{media: 640, top:-150, animation:'uk-animation-slide-top'}" );

https://community.getbeans.io/discussion/mobile-header/

Let’s say you want to replace your logo from the large breakpoint and smaller. You could add the following snippet to your child theme functions.php:

beans_add_attribute( 'beans_site_branding', 'class', 'uk-visible-large' );

add_action( 'beans_site_branding_after_markup', 'example_mobile_logo' );

function example_mobile_logo() {

 ?><img class="uk-hidden-large" src="https://cdn2.iconfinder.com/data/icons/publicons/64/wordpress-32.png" alt="Example Logo"><?php

}

Additional resources:
https://getuikit.com/v2/docs/offcanvas.html
https://getuikit.com/v2/docs/sticky.html#responsive-behavior
https://getuikit.com/v2/docs/core.html
https://community.getbeans.io/discussion/mobile-is-it-small-to-large-or-large-to-small/

https://community.getbeans.io/discussion/off-canvas-menus/

The following link adds code snippet that will remove primary menu and permanently enable offcanvas:
https://community.getbeans.io/discussion/off-canvas-menu/