Sticky column or sidebar for individual pages?

[Sandberg]

Hi,

I’m trying to get one of our columns to be sticky so it follows down on the page but I can’t seem to make it work. I know it’s possible to get a sticky sidebar, but since we want to first of all build the sidebar in the pro editor, I don’t think that’s possible? The second problem is that we want to have different sidebars for different pages, for this page, it’s only going to be the part you see on the attached image that is going to be sticky, on another page it will be a different element. Is there any way to make this happen that I haven’t thought of?

Thanks in advance!

[tristup]

Hi @Sandberg,

Thanks for reaching out.
You can do this by adding the Sidebar layout of the Header builder and add the Widget Area element to call the Widget area created through the Appearance > Sidebar.

Hope it helps.
Thanks

[Sandberg]

Hi,

I see! Thanks for sharing. Regarding the widget area, is there any way I can build something in the pro editor, such as the grid I showed in my screenshot, and add it to this widget area? Or is it just posts, pages etc we can add in it?

Thanks!

[tristup]

Hi @Sandberg,

You can only add the available widgets in Appearance > Widgets. Alternately, you can create the Global Blocks and use those as a Shortcode into the Custom HTML widget.

I would suggest you go through the article on how to create a Global Blocks and use it as shortcode.

Hope it helps.
Thanks

[Sandberg]

Hi again,

I tried the suggested approach with global blocks and created a sidebar in the header but it’s not quite what I’m looking for. The sidebar pushed the menu and it’s quite narrow as you can see in the image:

.

Is there any other way we can make the first “vivus card” sticky or create a larger sidebar that only contains this element and is sticky?

[Sandberg]

I’m working on an alternative fix that would be to have a full width bar under the menu that is sticky and pops up after the user scrolls down ~10-15% of the page. The formatting of it is however not working as you can see in this screenshot, I’m trying to create a 1/4, 1/4, 1/4, 1/4 row with an image, list text and so on but when I insert the list, the row goes crazy and jumps out of the screen:

[tristup]

Hi @Sandberg,

It is not possible to recognize the problem by seeing the screenshot. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Exact Page URL and Header name where you have done this.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Sandberg]

Hi again, I gave you a user in a secure note.

[tristup]

Hi @Sandberg,

I have checked your website and found that it still using the older version of Pro i.e. 4.3.3. I would suggest you update it to the latest version i.e. 5.0.8. The updated version has the organized options for Header which may help you on what you are trying to achieve.
I have also created a Bar into your Review header with 4 Container and added the image, list, and the text as you are expecting. And set the Bar 4 invisible for all the devices using the Hide During the Breakpoint option. I would suggest you check the Bar 5 which I have created and if that serves your purposes, please use it according to your need.

Hope it helps.
Thanks

[Sandberg]

Hi again,

Thank you for the help! It’s nice that the image and text now fits. What did you do to fix that? The list is however still not working as it goes outside of the bar:

Do you know why that is?

On mobile it currently looks like this with everything going outside of the screen:

[ruenel]

Hello @Sandberg,

In your Bar element settings, you need to set the height to “Auto”:

And in your Flexbox > Direction setting, you will have to set the responsive styling to be as a "Column " on a smaller screen size:

If you are not yet familiar with the responsive styling of the elements, please check this out:

• https://theme.co/docs/responsive-styling

Best Regards.