Setting up an individual sticky menu on main pages and their relevant posts

Here you go:

https://menspleasures.com/best-fleshlight-girls-review/

Here’s a CSS you may try:

.gb-container.my-side-menu {
    position: sticky;
    top: calc(100% - 100px);
    transform: translateY(-50%);
    left: 20px;
    width: 20%;
    margin-left: unset;
    margin-right: unset;
    min-height: 100px;
}

This will only work on large screen sizes though, and will cover your content on smaller screens. We’ll need to make it responsive depending on what you’ll place inside the Container.

To clarify, are you planning to add this on just post pages?

Perhaps you can just set a side bar? And we can make that sidebar sticky?

Kindly let us know.

Thanks alot Fernando. Really appreciate your help here.

How it comes out my end - would need to park itself higher and while the headline width is about 350, the text is stacking.

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

Because of the versatility of GB would be nice to proceed but if same can be achieved with sticky sidebar then by all means.

Yeah will have to be responsive and if this is too big a job I understand.

I would like to assign this menu to a number of posts and one page. But I will create 6 types of these category type menus.

I did try recreating the menu style in custom html. Is there a way I could copy and paste it into a widget - tried custom html but guessing thats not right.

Thanks

Hi there,

what you're trying to achieve is super complicated.
The 'sticky element' can only be positioned relative to other content if:

a. you use Javascript.
b. the HTML for the sitcky element is within the same parent container as the content you want it aligned with.

Both methods would require either custom development of redesign or your entire page.

No problemo. Will figure out another way.

I hope you find a solution .

Thanks David.

I'm trying to recreate the container menu I created in blocks in html.

Pasting the "edit as htlm" code from the container in a custom html widget isn't happening.

Don't suppose you may know where I'm going wrong.

<!-- wp:generateblocks/container {"uniqueId":"f63e0180","paddingTop":"40","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","isDynamic":true,"blockVersion":2,"className":"my-side-menu"} -->
<!-- wp:generateblocks/headline {"uniqueId":"df5e9513","textColor":"#ffffff","fontFamily":"Open Sans","fontFamilyFallback":"sans-serif","googleFont":true,"googleFontVariants":"300, 300italic, regular, italic, 600, 600italic, 700, 700italic, 800, 800italic","fontWeight":"800","fontSize":21,"letterSpacing":0.12,"marginLeft":"-30"} -->
<h2 class="gb-headline gb-headline-df5e9513 gb-headline-text">Mens Toys</h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Then "HTML" that is being a block cannot be copied into a Custom HTML Widget - it can only be used within the block editor.

I am trying to recreate that rectangle in html as I see that as the only way to do it.

Could you kindly confirm if this is the correct css:

#rectangle{
width:200px;
height:500px;
background:black;
}

Hi Robchanoi,

What’s the context of this CSS? This CSS alters the width, height and background of an element with an id of rectangle.

What HTML did you end up with?

Hope to hear from you soon!

Hi Fernando,

Not sure what you mean by context.

Or to put it another way, do know how I may recreate this menu in html?

If I can create the html in draft posts and edit it there, then c and p into a custom html widget, seems to be one way.

Thanks.

As mentioned by David, copying and pasting code from a Block to a Custom HTML Block doesn’t work.

As sample HTML of a menu would be something like:

<div class="menu-secondary-menu-container">
    <ul id="menu-secondary-menu" class="menu">
        <li id="menu-item-378" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li>
        <li id="menu-item-381" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li>
        <li id="menu-item-382" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li>
    </ul>
</div>

If you put menu items in The Block Element mentioned earlier in this thread, and make it appear through CSS, you’d see how it would look on desktop, but then again, you need to make it responsive. But, with your design, there wouldn’t be enough space on mobile and desktop to probably show it. You may need to redesign your entire page if so.

It would be best to reach out to a developer as the level of custom development would be out of our scope of support for the menu which appears and disappears through a button click.

Hope this clarifies!

Sure.

Thanks for the html but as before, I have moved away from the container block idea and will just use the sidebar widget.

I will explore how to make it happen there.

Thank you.

You’re welcome Robchanoi! Hope you find a solution!

Hi - having slight issue with fixed left widget.

On mobile its overlaying right sidebar query loop.

https://menspleasures.com/wp-content/uploads/2022/07/Screenshot_20220714-182353-1.png

I guess maybe better to build menu in query loop to avoid this?