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

[robchanoi]

Even though it’s not assigned to any posts it is appearing top left on site so will save as draft for now fyi

[robchanoi]

Actually it’s my canvass menu which is not full disappearing after I set location to left – relates to last post.

[robchanoi]

With add css added and my-side-menu it appears right side of page as a strip from top to bottom.

[Fernando]

Yes, you should place the Headlines within the Container Block.

The layout setting can be found in pages and posts edit page.

The Menu in the Top left is you off canvas menu button, you’ll need to go to Appearance > Customize > Layout > Off Canvas Menu Panel and set the side to left if you want it to appear in the left.

Yes, with the CSS, the Block Element would alway be appearing in the right. It wont have a button (the level of customization for this would be out of our scope of support).

Hope this clarifies!

[robchanoi]

Tks – yes i mean headline in a container block which is in the main container block – container in a container – so my-side-menu in both containers.

Oh I see so for each post you want it to show, each posts’ layout has to be edited? On that ss its on the same page of the block element or is that a ss of a post and the posts container should feature my-side-menu?

With left menu set in post layout and block published it still appears as a strip on right, is it possible to appear on the left and sticky as you scrol down the page or is this not possible. Dont worry about clickable button.

Yes I set canvass menu to left but it doesnt close properly so set it back to right.

[Fernando]

I see. Everything should be in the Container Block.

It’s a screenshot of a page on edit. I just used that as a sample. Block Elements shouldn’t have that.

The Block Element and the off canvas menu are two different things. Basically, the Block Element is unrelated to the off canvas menu which you have on the top left. When you click that button, the one appearing is the off canvas panel.

The Block Element we’re creating is to mimic the menu from the reference site you linked.

To clarify, would you like to have the off canvas menu along with a menu similar to your reference site? Or do you want just one of them?

Kindly let us know.

[robchanoi]

I see, thanks.

yes, something like this if possible pls:

https://menspleasures.com/wp-content/uploads/2022/06/left-sticky-menu.jpg

so it appears below page hero and sticks as visitor scrolls down

yep, i was referring to a problem with the canvass menu – i will raise it in the other thread.

Edit: yes both pls. I will still keep canvas – these are like category menus.

Thanks Fernando.

[Fernando]

I see, Let’s handle the Block Element in this thread, and the off canvas menu in the other thread for clarity.

If you want to place it on the left, kindly replace the CSS with this:

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

Kindly let us know how it goes!

[robchanoi]

Ok, thanks so:

1. my-side-menu added to main container and container inside
2. hook – before-header
2. test post layout changed to left sidebar
3. css above added to additional css in customizer

looking like this at the mo https://menspleasures.com/wp-content/uploads/2022/06/menuleft1.jpg

[Fernando]

Alright, now you can add menu items either through adding Headline Blocks which will be hyperlinks inside the Container or use a WP Navigation Block.

Perhaps you can create a test page, and set it the display location of the Block Element to that page first for testing?

[robchanoi]

Sure – As per the ss, this is the page I set it up on /best-fleshlight-girls-review/ but have disabled for now as one long narrow strip.

Ideally though I’m trying to achieve smt like this, staring below the top section and staying there while the user scrolls

https://menspleasures.com/wp-content/uploads/2022/06/left-sticky-menu.jpg

[Fernando]

Try setting the hook to inside_site_container, then modify the CSS to something like this:

.gb-container.my-side-menu {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 20%;
}

Hope this helps!

[robchanoi]

Thanks – but now looking like this:

https://menspleasures.com/wp-content/uploads/2022/06/leftmenu2.jpg

[robchanoi]

actually -sorry – still like this:

https://menspleasures.com/wp-content/uploads/2022/06/left-sticky-menu.jpg

recap:

– my-side-menu in main container and container within Advanced – add css class
– hook – inside_site_container
– post layout left sidebar
– latest css added to additional css

[Fernando]

Can you create a mock post, then display the Block Element there so we can view it live?

It’s hard to assess what to do next through screenshots and not seeing the actual element. 🙂

You can use this Lorem Ipsum generator to add random content to the mock Post for testing: https://www.lipsum.com/

Hope to hear from you soon!

[Author]

Posts