[Resolved] Secondary Off Canvas Panel

Home Forums Support Secondary Off Canvas Panel

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1371889
    sl3439gdlc39

    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.

    #1372131
    David
    Staff
    Customer Support

    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;
        }
    }
    #1372343
    sl3439gdlc39

    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.

    #1372345
    David
    Staff
    Customer Support

    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.

    #1372356
    sl3439gdlc39

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

    #1372388
    David
    Staff
    Customer Support

    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?

    #1372391
    sl3439gdlc39

    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.

    #1372473
    sl3439gdlc39

    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.

    #1372711
    Tom
    Lead Developer
    Lead Developer

    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.

    #1373176
    sl3439gdlc39

    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”

    #1373224
    David
    Staff
    Customer Support

    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 ?

    #1374603
    sl3439gdlc39

    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.

    #1374609
    David
    Staff
    Customer Support

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

    #1374676
    sl3439gdlc39

    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?

    #1374692
    David
    Staff
    Customer Support

    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>';
    }
    ?>
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.