[Resolved] Custom menu in Sidebar Element

Home Forums Support [Resolved] Custom menu in Sidebar Element

Home Forums Support Custom menu in Sidebar Element

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1571448
    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!

    #1571476
    David
    Staff
    Customer Support

    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?

    #1571500
    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.

    #1571547
    David
    Staff
    Customer Support

    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.

    #1571549
    André

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

    #1571561
    David
    Staff
    Customer Support

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

    #1571714
    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.

    #1571738
    David
    Staff
    Customer Support

    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.

    #1571801
    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

    #1572105
    David
    Staff
    Customer Support

    Glad to hear you found a solution

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.