Home › Forums › Support › Setting up an individual sticky menu on main pages and their relevant posts
- This topic has 49 replies, 3 voices, and was last updated 1 year, 9 months ago by Fernando.
-
AuthorPosts
-
June 3, 2022 at 12:38 am #2242096robchanoiJune 3, 2022 at 1:26 am #2242136Fernando Customer Support
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.
June 3, 2022 at 3:07 am #2242232robchanoiThanks 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
June 5, 2022 at 2:37 am #2243888DavidStaffCustomer SupportHi 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.
June 5, 2022 at 4:37 am #2243961robchanoiNo problemo. Will figure out another way.
June 6, 2022 at 1:18 am #2244690DavidStaffCustomer SupportI hope you find a solution .
June 6, 2022 at 2:36 am #2244752robchanoiThanks 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 -->
June 6, 2022 at 4:00 am #2244819DavidStaffCustomer SupportThen “HTML” that is being a block cannot be copied into a Custom HTML Widget – it can only be used within the block editor.
June 6, 2022 at 8:27 pm #2245620robchanoiI 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;
}June 6, 2022 at 8:36 pm #2245622Fernando Customer SupportHi 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!
June 6, 2022 at 9:56 pm #2245655robchanoiHi 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.
June 6, 2022 at 10:10 pm #2245658Fernando Customer SupportAs 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!
June 6, 2022 at 11:04 pm #2245689robchanoiSure.
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.
June 6, 2022 at 11:13 pm #2245694Fernando Customer SupportYou’re welcome Robchanoi! Hope you find a solution!
July 17, 2022 at 10:57 pm #2285673robchanoiHi – 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?
-
AuthorPosts
- You must be logged in to reply to this topic.