[Support request] Setting up an individual sticky menu on main pages and their relevant posts

[robchanoi]

Tring to set up an individual sticky menu on main pages and their relevant posts.
Came across this – generatepress-guides.com/2020/10/07/how-to-create-sticky-blocks-in-the-generatepress-sidebar/
but I’m not quite following the instructions.
Wld like it to look smt like lelo’s categories menu on right side, but in this case left side and open not closed although on money pages closed probably better if such an option is possible – if too extreme no problem :/
lelo.com/sona-2-cruise

Might be a holiday your end so whenevers great – cheers

[Fernando]

Hi Robchanoi,

The categories menu in the reference link you provided would need a custom JS to achieve. Specifically, from the menu appearing once the categories “button” is selected.

This customization would be out of our scope of support.

The concept would be similar to something like this: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_js

If it’s a just the menu without the button, we can do it through Creating a Block Element with a Container Block with Headline Blocks within it designed appropriately, then we can provide CSS to make it fixed to the right.

Alternatively, if you’re not using the off-canvas menu for anything else, we can use that instead I believe.

Hope this clarifies!

[robchanoi]

Thanks Fernando.

These floating bespoke menus would have quite a few links relating to their field which I wouldnt want appearing in the current top nav menu if thats what wld happen – not fully sure how this wld work if u cld clarify pls.

Alternatively, Creating a Block Element with a Container Block with Headline Blocks sounds good. So this wld be a block element that could be assigned where i choose or wld have to be built into posts?

Tks

[Fernando]

Basically, with just a Block Element and custom CSS, we can make a menu appear at the side, however, it would always be appearing.

You would need custom JS to achieve the hide and show effect of the menu.

If you’re not using the Off Canvas Menu, we can also use that, however, if you’re planning to add this in the website we we were tackling in the other topic, you’ve already used the off canvas menu there.

You can also explore third party plugins which may offer such a functionality: https://bashooka.com/cms/off-canvas-navigation-menu-wordpress-plugins/

Hope this clarifies!

[robchanoi]

Ok, thank you, if we cld run with the Block Element and custom CSS that wld be good.
Do I set element type to “left sidebar”?

Thanks

[Fernando]

You can set it to Hook, then hook it to before_header then we’ll use CSS to move it.

[robchanoi]

Thanks – if its a series of topic related links one headline block is fine?

i.e

how to this
how to that
..
..
..

[Fernando]

It might be better to use different Headline Blocks for ease of modification.

You may also use a WP Post Navigation Block though we’ll need custom CSS to alter the look of this.

Hope this clarifies!

[robchanoi]

Ok thanks – I have built a demo menu – do you need anything more from me?

[robchanoi]

350 w x 700 h fyi
All posts are centred at 650 w

[Fernando]

Can you share the link to where I can see the menu?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon!

[robchanoi]

Link below

[robchanoi]

Thank you

[Fernando]

Great!

Can you add my-side-menu class to the classes of the Container Block?

Example: https://share.getcloudapp.com/bLuBJz64

Then set the Display Rule Location.

Then, add this CSS in Appearance > Customize > Additional CSS:

.gb-container.my-side-menu {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

Kindly let us know how it goes.

[robchanoi]

Thanks – have added css to add css and my-side-menu to the class of the Container Block.

I should put headline in a container inside menu container? Have placed my-side-menu in menu container.

I also cant locate – layout – default in the bottom left of your pic.

Tks if u could advise.

[Author]

Posts