Sidebar Navigation Dropdown Issue

HI everyone,

I wonder if someone can help me. I was asked to move a website from Joomla to Wordpress and I have taken the opporutnity to do it in Beans to help me with my learning.

I have everything working great but one thing I can't quite figure out is the Navbar. The theme has it located in the left sidebar. The About section has 3 sub pages.

When you click the About us page it loads and the subnav is visible. However if you click into a subnav page the dropdown disapears. and you can't access the pages again.

I've tried a few things and can't seem to make it work so that you can hover over About Us and see the subnav (how it woudl behave if the nav was in the header).

The website is: http://swim.clearbluedesigns.co.uk/

Please don't judge me for the theme I didn't design it, i'm just porting over to Wordpress 🙂

If anybody knows how to resolve that it woudl be really helpful. I have tried it in the right sidebar as well and it behaves in the same manner.

Thanks!

Tom

Hello Tom,

When you click the About us page it loads and the subnav is visible. However if you click into a subnav page the dropdown disapears.

This is the default behavior of UIKit's nested navs.

and you can't access the pages again.

Click on the parent menu item to open the subnav dropdown again.

Information

Out-of-the-box, the navigation components include UIKit. When you place the menu into the sidebar, Beans automatically adds the .uk-nav-sub class and walks down the menu structure to add the appropriate styling classes.

Changing the Behavior

You have several options to change the default behavior. Pick the one that fits your needs and adjust it.

The submenu displays when the parent <li> has the following class: uk-active. UIKit then adds the class uk-open and adds inline styling to the submenu's `` to show it.

Before you get started on these options, make sure that the CSS Classes is enabled for the Menus by doing the following:

• Go to Appearance > Menus
• Click on Screen Options in the top right hand corner. That slides down the options for this screen.
• Make sure that CSS Classes checkbox is checked.
• Now click on Screen Options again to close the options window.

Option 1 - Add class uk-active

You can add the uk-active class to the parent menu item by doing the following:

• Go to Appearance > Menus
• Select the menu
• Click on the "About Us" menu item to open it.
• In the "CSS Classes (optional) field, add: uk-active.
• Click "Save Menu"

You'll notice that the submenu stays open now.

BUT the "About Us" menu item is highlighted if when you're not on an about page. While it works and is a very simple solution, it's not the best user experience.

Option 2 - Force Open with JavaScript

This option is better than Option 1 as it forces the submenu to stay open and allows the active menu highlighting to work properly.

Do the following to add the appropriate CSS classes to the parent menu item:

• Go to Appearance > Menus
• Select the menu
• Click on the "About Us" menu item to open it.
• In the "CSS Classes (optional) field, add: tm-beans-keep-open uk-open.
• Click "Save Menu"

Notice, we're adding a new CSS class attribute tm-beams-keep-open.

If you refresh the front-end page, the open/close icon is right, but the submenu is not open. Why? We need to add some JavaScript to target our new CSS class and force open the submenu. Ready?

Here's the JavaScript file:

(function ( $ ) {
 "use strict";

 // Let's wait a little bit to let UIKit do its thang first.
  setTimeout( function () {
   $( '.tm-beans-keep-open' ).not('uikit-active').each(openSubmenu);
 }, 100 );

 /**
  * Force open the submenu by targeting the submenu <div> container,
  * removing the `uk-hidden` class, and then adjusting the CSS to
   * show the <div> container.
   *
   * @returns {boolean}
  */
 var openSubmenu = function () {
   var $subMenu = $( this ).children( 'div' );

   // Skip if there is no submenu.
   if ( $subMenu.length == 0 ) {
     return true;
    }

   $subMenu.removeClass( 'uk-hidden' );
    $subMenu.css( {
     overflow: 'hidden',
     height: 'auto',
     position: 'relative'
    } );
  }
})( jQuery );

You will need to enqueue this JavaScript file.

Option 3 - Turn off UIKit for the Sidebar menu

As this is your only menu, you can turn off Beans applying the UIKIt nav classes by doing this:

beans_remove_action('beans_modify_menu_args' );

Then you'd need to add the CSS styling for the sidebar menu.

Cheers, Tonya

Hi Tonya

Thank you for the detailed reply I really apprecite you taking the time to write all that for me. I'm going with option 2.

*I've added the css to the menu class and added the js file and enqued it but i'm afraid it doesn't seem to be working. The page loads and then submenu is displayed for a fraction of a second then it's gone.

I did notice that the uk-open class only shows when you are not on the page, as soon as you click about us the uk-open seems to go.

If you could shed any light that would be great!

Ignore that, when i turn development mode off it works as expected.

Sorry for the confusion!

Thank you!

Well that's excellent @tombathgate.

Tip: When in developer mode, enqueue at a later priority, e.g. 15, to ensure UIKit scripts load before your script above.

<happy coding>

Tonya