[Resolved] Custom menu in Sidebar Element

[André]

Hi,

I am trying to add a custom menu to some of my pages. I use Elements to customize pages, but I cannot add menus to them. I realized that WordPress decided not to include Gutenberg’s navigation block, so I tried to add buttons. That is a bit tedious but basically works. The problem is that this menu does not reflect the current page.

What I want to achieve:
I want to provide the user with an easy way to navigate related pages (not posts!). This option should only be available on specific pages. With Elements, this is easy. I use one Element to adjust the layout and another Element to add the menu.

Problem:
The menu is just a bunch of vertically stacked buttons. These buttons do not know their current state (current or not). I want to highlight the button that corresponds to the current page. How can I achieve this (similar to the main menu)?

Thanks!

[David]

Hi there,

will this other Menu be the same for all that pages it is displayed on ? Or will the menu items be different for each page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Hi David,

No, the menu will be the same for all those pages. If the user opens the first page, it should highlight the first menu item. If the user opens the second page, it should highlight the second item, and so on.

The user can get to any page through other direct links. In those cases, it should also highlight the appropriate item like any regular menu.

The pages are all subpages, like Home>Offerings>Training/Consulting/etc. If the user lands on the Training page, the menu should show Consulting, etc. as well in the sidebar. So they are related.

I created a separate menu in WordPress already, but I cannot add this to the Element. I suppose the reason is the missing navigation block in Gutenberg.

[David]

Why not use the Secondary Navigation and set that to the Sidebar ?
You can then use a Layout Element to disable the Secondary on the pages you don’t require it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Do you mean a widget? How do I style this then?

[David]

No – you can set the Customizer > Layout > Secondary Navigation –> Location to Left/Right Sidebar.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

That does not work. I have several pages that have a left sidebar. If I use the secondary menu, all of those will show the same menu. But I need pages with a left sidebar to show some CTA, some pages as described above with this menu, and another bunch of pages with a different menu.

[David]

You can use the Layout Element to Disable the Secondary Navigation where you don’t require it.

https://docs.generatepress.com/article/layout-element-overview/

Example Display Rule – Location: Entire Site, Exclude: Pages. This will display the Sidebar only on Pages.

If you need the menu to be dynamic – ie. show different items for different pages then you would need a Conditional menu plugin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Eventually, I found the solution myself. I did it the old way – without Gutenberg. For all those who might be interested, this is how I achieved it:

1. Create a shortcode to add menus with classes as wished via snippets Plugin:

function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( 'name' => null, 'class' => null ), $atts));
return wp_nav_menu( array( 'menu' => $name, 'menu_class' => $class, 'echo' => false ) );
}

add_shortcode('menu', 'print_menu_shortcode');

Credits: A commenter at the Blog of Stephanie Leary (almost 6 years old)

2. Create a custom menu with the desired items

3. Create an Element with GenerateBlocks and add the shortcode (give a custom CSS class)

4. Add CSS code via Customizer for the given CSS class

[David]

Glad to hear you found a solution

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts