Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to display nav-menu as sticky vertical menu?

  • Hi

    would like to display the nav-menu vertically below site-logo / main title and have both title & menu sticky on scroll.

    I have tried to edit “Slider” template, but failed.

    I try to achieve a menu-layout as seen on this site.

    Can you please provide the CSS for this layout?

    Kind regards,
    Sascha

  • Hi there,

    There is a new site in the library called Brand that has a similar structure. You may use that as a starting point.

    Alternatively, you may follow a different implementation as outlined by David here:
    https://generate.support/topic/frontend-theme-like-the-default-wordpress-admin-dashboard/#post-83544

    Hope that helps.

  • Thanks a lot! The “Brand” template is awesome, haven’t noticed yet!

    So now I’d like to position the sidebar to the bottom. And also like to make the sub-menu collapse and expand it when clicking the “+” next to “Schwerpunkte”. I need to replicate this site.

    Check this short screen recording for expand/collapse: https://clips.macbay.net/conversations/6b7583e7-b7e9-5bd4-a85e-2d51613df672

    You find the target site, where I need to replicate the design in private notes field.

    Can you please help further with this?

    Kind regards,
    Sascha

  • Hi there,

    the URL provided is behind a coming soon page. Can you share a login for it ?

  • Oops, wrong URL, sorry. Now I have added the page-URL as well as an auto-admin-login-link

  • You would need to remove the Logo from the Customizer > Site Identity and add it as an image block to the Top of the Right Sidebar element.
    And then use a Mobile Header on Mobile to display a logo.

  • Thanks, will try!

    In the meantime a few more issues I need to solve:

    1. The sub-menu should open on click instead of hover. How to achieve that?

    2. The arrow (expand) button should be a red “+” icon, no idea how to replace the current black arrow.

    3. Same goes for the arrow (collapse) button

    Can you also help me with this?

    Best
    Sascha

  • 1. The WP navigation block should have the option to change the submenu open method from hover to click.
    https://app.screencast.com/nB7JowQG0xuSY

    2. That’s not something that we can control, please reach out to WP’s support to see if they have a filter for that.

    3. Same as NO.2.

  • 1. Does not work. Site based on GP site template “Brand”

    2. & 3. Oh, that’s confusing, and a bit disappointing. Isn’t the sidebar, menu (created with GP Element) and icons all by GP? As said, I had only altered “Brand” template a bit

    4. On mobile, the sidebar moves to the bottom, below the content, but should be positioned below the site logo (like on desktop & tablet). How?

  • The issue here is the use of the WordPress Navigation Block.
    The Navigation Block has very few options and no PHP or JS filters to make the kind of changes you require,

    So no, GP has no control over it and does not controls its icons.
    Which is why we don’t use that block or other core blocks it in our site library sites.

    To move the sidebar above the content on mobile, you can use this CSS:

    
    @media (max-width:768px) {
        .is-left-sidebar.sidebar{
            order: -1;
            margin-bottom: 40px;
        }
    }
    
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.