Mobile navigation

Mobile – hamburger menu in Beans.

Beans-Hamburger-mobile-menu

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

Renaming the mobile 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/

Client case code

It has 5 top menu links.
5-6 social menu icons.
Opens the mobile menu to the right.
Etc.

/* -------- MOBILE  RESPONSIVE CSS CODE ----------*/

/* Does not push the content when offcanvas menu opens. */
.uk-offcanvas-page {
    margin-left: 0 !important; /* Important is necessary since it overwrites CSS added via JS */
}

/* The off canvas menu bar - opens right side*/
.uk-offcanvas-bar-flip {
    background: #26252b; /* Same color as above header. */
}


@media (max-width: 959px) {
.uk-button {
    -webkit-appearance: none;
    margin: 0;
    border: none;
    overflow: visible;
    font: inherit;
    color: #fe4623 !important; /* #fff - #444 Adjusted */
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 12px;
    background: transparent !important; /* #eee Adjusted */
    vertical-align: middle;
    line-height: 30px;
    min-height: 30px;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
}
	
.uk-button:hover, .uk-button:focus {
    background-color: transparent;
    /* color: #fff; */
	color: #fe4623;
}
	
/* Display main menu. */
.uk-visible-large {
    display: block !important;
}

/* Hide hamburger menu. */
.uk-hidden-large {
    display: none !important;
}
	
.tm-logo {
    height: 80px;
    margin: -40px 0 20px 40px;
}
	
.tm-site-branding, .tm-site-branding a {
    width: 100px;
}
	
/* Mindre strand bilde i mindre skjermer. */
.home .tm-header {
  height: 45vh !important; 
  margin-top: 60px !important;	
}
		
}


@media (max-width: 800px) {		
.widget-above-header {
    width: 300px;
	margin: auto;
}		
	
}


@media (max-width: 720px) {
/* Hide regular menu. */
.uk-visible-large {
    display: none !important;
}
	
/* Show hamburger menu. */
.uk-hidden-large {
    display: block !important;
}
	
.tm-primary-menu {
    margin-right: 140px !important;
    float: right;
    margin-top: -30px;
}
	
.uk-icon-navicon.uk-margin-small-right {
    font-size: 26px;
}

/* Social icons */	
.menu-item-105, 
.menu-item-107,
.menu-item-109, 
.menu-item-150 {
    padding: 5px 4px 5px 4px;
	font-size: 22px;
}	

.tm-site-branding, .tm-site-branding a {
    width: 90px;
}	
	
	
}
	
	
@media (max-width: 660px) {	
.tm-primary-menu {
    margin-right: 100px !important;
    float: right;
    margin-top: -30px;
}
	
/* Mindre strand bilde i mindre skjermer. */
.home .tm-header {
  height: 35vh !important; 
  margin-top: 60px !important;	
}	
			

}	


@media (max-width: 560px) {			
	
.tm-primary-menu {
    margin-right: 60px !important;
    float: right;
    margin-top: -30px;
}
	
.tm-logo {
    height: 80px;
    margin: -40px 0 20px 40px;
}	

}



@media (max-width: 470px) {

.tm-primary-menu {
    margin-right: 30px !important;
    float: right;
    margin-top: -30px;
}

	
}	


@media (max-width: 415px) {

.widget-above-header {
    width: 250px;
    margin: auto;
	padding-left: 20px;
}
	
.tm-primary-menu {
    margin-right: 0px !important;
    float: right;
    margin-top: -30px;
}	
.tm-logo {
    height: 70px;
    margin: -30px 0 20px 15px;
}	
	
/* Social icons */	
.menu-item-105, 
.menu-item-107,
.menu-item-109, 
.menu-item-150 {
    padding: 3px;
	margin-left: 5px;
	float: left;
}	

.tm-site-branding, .tm-site-branding a {
    width: 70px;
	}	
	
}		

/* -------- MOBILE  RESPONSIVE FUNCTIONS FILE CODE ----------*/
beans_remove_output( 'beans_offcanvas_menu_button' );

// 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' );


/* Click submenu children without jumping to parent menu item.
https://community.getbeans.io/discussion/offcanvas-menu/#post-558 */
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;
}
Filed under: Learning

No comment yet, add your voice below!

Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website