Sticky navigation - Forum | JoomShaper
Awaiting an answer SP Page Builder

Sticky navigation

Asked by Alena Merklová 3 years ago Last activity 3 years ago

Hello.
I am creating my first blog article in sppb.
i want to have two columns (3+9). In the left column there will be a menu, in the right column there will be an article. The left menu will contain html anchors for sections in the article. See https://i.postimg.cc/7hmjstBN/1-2.png.
I want to make the menu sticky. I try two ways and neither works properly.

  1. I set up the sticks in the addon. See https://i.postimg.cc/TYNZnS5d/2.png. But the result is that the sticky is applied to the article as well, so the article gets stuck with the menu and I can't read it all.
  2. I will set the sticks on the addon differently. See https://i.postimg.cc/V6FhvHcc/3.png. But that doesn't work because the css is on an addon and I would have to be able to set the code for the wrapper one level up... https://i.postimg.cc/FFDqQqZy/4.png.

How to solve it?

7 replies

Oldest first Newest first Most helpful
Pavel
3 years ago · edited

Hi.

All about sticky position in SPPB and Helix https://www.joomshaper.com/forum/question/8541

  1. Use SPPB page CSS field, or template's Custom CSS field (Helix), or custom.css file (Helix)

And besides everything else, a very bad idea to use the SPPB pages (if you try exactly to use it) to create a blog and articles. It is better to use the standard Joomla blog and articles + SPPB article editor

Alena Merklová Asked this
3 years ago

I guess I expressed myself imprecisely. I use the standard Joomla blog and articles + SPPB article editor :)

Pls, look this: https://www.joomshaper.com/forum/question/8541#qa-answer-114891
That's exactly what I'm dealing with. The problem is that I have two parent blocks next to each other and the left one affects the right one :(

Alena Merklová Asked this
3 years ago

When I use custom code for sticky, I need to identify the div to apply it to. The problem is that I see two levels in the sppb admin when editing an article.
column-id-1688202612331 and sppb-addon-1688202932533

But in the html code of the page, between these two divs, sppb will add two more. Therefore, it is difficult to come up with a css rule that would identify exactly which div to implement sticky on.
So I have to create an element with the exact ID for each article :(

Pavel
3 years ago · edited

Hi Alena.

Add class to the column containing navigation.

For example sticky-col

And use following code

.body-innerwrapper {
    overflow-x: visible;
}
.sticky-col .sppb-addon-wrapper {
    position: sticky;
    top: 100px;
}

Best place for this code is custom.css file in Helix

So I have to create an element with the exact ID for each article :(

Then all that you need to add sticky-col class to the column each time when you create new article. Or you can save whole section and use it as template when create new article.

P.S. Showed by SPPB 3 example . In SPPB 4/5 all the same

Alena Merklová Asked this
3 years ago

nice.
what is?

.body-innerwrapper {
    overflow-x: visible;
}
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Is this solved now? And thanks Pavel for sharing the solution.

-Regards.

Pavel
3 years ago · edited

nice. what is?

Hi. If the parent element, inside which you want to make a sticky element, has overflow: hidden; , then the sticky position will not work. In Helix, body-innerwrapper element has overflow-x: hidden; by default. So, you need override it. If you use another template, then this is not required. Or something else is required if the sticky position does not work.

Log in to reply.