[Resolved] Secondary Off Canvas Panel

[generatepressiscool]

Hello!

I’m trying to achieve a secondary mobile menu, similar to what Apple has for their design guidelines (when in mobile view).

Is it possible to the customize the off canvas menu to achieve something similar? I want this to be a secondary menu, the Primary Navigation should remain the same. I see that I can already set it to replace it, but I want it to be in addition to that, just like Apple’s page.

[David]

Hi there,

not sure about using Off Canvas.
What you could do is set the Customizer > Layout > Secondary Navigation –> Location to Left Sidebar.

Then add this CSS to make the submenu items stack when open:

.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:hover ul, 
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
    left: 0;
    width: 100%;
    position: relative;
}

Then some CSS to reposition the Secondary Nav to the top on Mobile:

@media (max-width: 768px) {
    .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

[generatepressiscool]

Thank you for the quick response!

Just tried it, but the second CSS code repositions the entire sidebar to the top on mobile.

I would like the web sidebar to remain hidden on mobile since I am using that for a “table of contents” style menu. (also just like Apple does in the page linked in the original description).

Or somehow only show the sidebar with the menu and nothing else on mobile.

[David]

Can you provide a link to your site so i have a better understanding.
You can edit your original topic and use the Site URL to share the link privately.

[generatepressiscool]

The website is not yet published, but I added a link to a screenshot for clarification.

[David]

So is the Table of Contents what you want to display in the toggle drop down for mobile ?
And will this change for each page?

[generatepressiscool]

Yes, that’s correct.

It will change for each page, the way it’s set up now is that there’s a Widget with a Navigation Menu inside.

There’s going to be about 5 pages each with a widget navigation menu like that, so the mobile toggle menu should change accordingly.

[generatepressiscool]

Update:

Managed to hide the content I did not need when in the mobile view by using

@media (max-width: 768px) {
	.sidebar .widget_nav_menu {
		display: none;
	}
}

So now I get only the sidebar with the secondary nav menu button inside.

Next step would be to make this sticky when scrolling like the Apple one.

Then it should be a matter of styling it.

[Tom]

I’m not sure if the Secondary Nav will work for this purpose, unfortunately.

Using a widget with a Navigation menu widget sounds like a better solution, and that way you can use a plugin like Content Aware Sidebars to add different navigations to each page as needed.

[generatepressiscool]

Hi Tom!

Thanks for answering.

Do you mean a navigation menu widget inside the sidebar? I’m currently using that when in the web view. And I do have Content Aware Sidebars already installed.

What seems problematic is making it sticky like Apple’s, and also having that collapse/expand functionality for “sections”

[David]

As the ‘menu’ will be the Table of Contents then the Secondary Nav won’t work in this case.
Instead we would need to hook in a custom toggle button above the sidebar on mobile. This could be used to show hide the menu.

The ‘collapsing’ expanding options is something that would have to be part of the TOC plugin i am afraid.

What TOC plugin are you using ?

[generatepressiscool]

I think I have it mostly figured out, but would appreciate a double-check.

I’ve updated the link in the original post showing the current implementation.

Using this in child theme functions.php to match the post’s category to the correct menu:

add_filter( 'wp_nav_menu_args', 'bb_wp_nav_menu_args' );
function bb_wp_nav_menu_args( $args = '' ) {
	if( $args['theme_location'] == 'secondary') { 
		$cats =  get_the_category();
        $cat = $cats[0]; //gets the first cateogry of post/page
		$args['menu'] = $cat->slug; //sets the menu as the one matching the category name (e.g. 'deadlift' category to 'deadlift' menu)
	}
	return $args;
}

The code to place the sidebar at the top on mobile:

@media (max-width: 768px) {
    .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Then, making it sticky while scrolling:

@media (max-width: 768px) {
    #left-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Hiding unwanted sidebar content (like the menu used when in web view):

@media (min-width: 768px) {
	.gen-sidebar-secondary-nav {
		display: none;
	}
}

This code to make sub-menus stay open when reading posts under that parent

.sidebar .secondary-navigation .main-nav .current-menu-item .sub-menu,
.sidebar .secondary-navigation .main-nav .current-menu-ancestor .sub-menu {
	opacity: 1;
	left: auto;
	right: auto !important;
	position: relative;
	width: 100%;
	clear: both !important;
	top: auto;
	float: none;
	visibility: visible !important;
	pointer-events: auto;
	height: auto;
	display: block;
	box-shadow: none;
}

.sidebar .current-menu-item .dropdown-menu-toggle,
.sidebar .current-menu-ancestor .dropdown-menu-toggle {
    display: none;
}

And finally various CSS for styling, hiding the hamburger icon, adding FontAwesome icons, alignment, and so on.

[David]

Thats awesome – great approach. Be good to see it for real 🙂
Thanks for sharing.

[generatepressiscool]

Thank you, David.

One thing I’ve yet to figure out, now that my menus are dynamic based on the current category:

How to add the category name inside the secondary navigation Mobile Menu Label?

[David]

Is it for the single post?
If so you could add this to the generate_inside_secondary_navigation hook:

<?php
$category = get_the_category(); 
if ( !empty( $category ) ) {
  echo '<h2 class="category-label">' . $category[0]->cat_name . '</h2>';
}
?>

[Author]

Posts