Make Visual Composer Row Sticky

In most cases, yes. If you can share a link to your website and tell me which row you’d like to make sticky, I can tell for sure. ??

Hi Mark,

In row I added extra class name field: sticky

In plugin settings, I tried “sticky” “.sticky” and “#sticky” to no luck.

What is the correct method?

It should work if you use .sticky. If it’s not working, something else might be going on, but I won’t be able to tell without seeing your site.

Hi Mark,

Thank you for your response. I got it to work using a different class name. Some questions:

1. Can I set different gutter heights for desktop and mobile? My theme header has different heights for desktop header and mobile header.

2. Is it possible to set more than one class sticky?

Thanks again.

Glad you got the first issue working!

To answer your other questions:

1. If by gutter heights you mean the spacing between the top of the page and the sticky element, then no, that can not be set differently for desktop and mobile.

2. Currently it is only possible to have one sticky element. In a future version, I will add the option make more than one sticky, but I don’t have an expected timeline for that at the moment.

Hi Mark,

Would it be possible to specify a different spacing number between the top and sticky element for mobile devices using CSS? I just need to specify if less than 1000 pixels wide then height is X pixels. If I can make that work your plugin would solve my needs.

Hi Mark,

I kind of have it working here with CSS on this page: https://epichybridtraining.com/20646-2/ using the below css.

I don’t think I am applying it to the right elements however as there is white row visible on scroll equal to the height of the row I made sticky. Can you help me tweak my code?

@media screen and (max-width: 1000px) {
.sticky-element-original {
top: 100px !important;
}
}

I looked at your site and it’s not immediately clear what you’re trying to do or what’s going wrong. I don’t see a white row next to the sticky element, and the white header (that’s also sticky) seems to work a little strange.

Can you please clarify?

Hi Mark,

Thanks for looking at this. I may have added some css that hid what I was trying to show you. Please check out the page now:

https://epichybridtraining.com/20646-2/

In desktop the sticky element is fine. When I inspect with Chrome in mobile view I get the white row above the sticky element before scroll.

The only CSS I’ve added to the page to try and adjust for the mobile header height:

@media screen and (max-width: 1000px) {
.vc_row.wpb_row.section.vc_row-fluid.pagemenu.vc_custom_1498949584454.sticky-element-original {
top: 100px !important;
}
}

Screenshot: https://cl.ly/2r2c0z043D0K
desktop top header height is 57
mobile header height is 100
trying to get sticky element to be shown just beneath header in both.

Thanks again.

Hi Paul,

The white bar appears because of the CSS code you’ve added, and I’m not sure why you’re doing that. By moving it down 100 pixels, it will leave a gap, which is the white bar.

By using any styles that include !important, the plugin will not work correctly anymore so I definitely suggest avoiding that. What you could try instead, if you really must push it down 100 pixels, is something like this:

@media screen and (max-width: 1000px) {
.vc_row.wpb_row.section.vc_row-fluid.pagemenu.vc_custom_1498949584454.sticky-element-original {
   border-top: solid 100px #ee2;
   }
}

Hi Mark,

Thanks for the updated code.

Your code provide left a 1px line, the color of the element instead of the larger white space described earlier.

screenshot:https://cl.ly/2F3r0X390p1T

I adjusted the pixel height to 47 even though my mobile header is 100px and that did the trick. Good to go as desired now. Not sure how those numbers add up.

Could you consider adding this as a feature: an additional gutter height field / option for mobile?

Glad it’s working now Paul!

I’ll definitely look into the option of making the gutter different for desktops and mobile screens. Thanks for the suggestion! ??

Hello Mark,
I just downloaded your Plugin and tried to set it up but it does not work. I tried it on one landing page that is not visited that often just to test it.

Link: https://b-ceed.de/kick-off-event/

The brown row with the ID “starr” (which means in English “sticky”, it is german) with the filters in it should stay sticky on the top of the screen when scrolling down. In the first tries it was disabled and you could not see the row anymore. Now, after renaming the row to the ID “starr” it is visible again but cannot stay sticky.

Can you please check what I am doing wrong? We are currently setting up our English Website and I want to include it directly there before we launch it to the public world wide web.

Thank’s in advance.
Marvin

Hi @morpheus200k

I checked your site but I currently do not see my plugin active on the page. I’ll need to see it in action in order to check what could be wrong. Can you activate it again please so I can see the issue?

Thanks!

Hi Mark,

I Turned it on now…please Check asap