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/
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;
}
No comment yet, add your voice below!