Off-Canvas - Like it is on your pro site

I can not figure for the life of me how to do like you did on the pro site. https://theme.co/pro/

Is there a simple way to do this?

Also is there a way to have a revslider confined to a column, and to not expand outside that column? As an example, the image I attached, if you wanted the rev to only show in the 10 responsive column and not overflow outside of that column, just fit that column, can this be done? Does this make sense?

1 Like

Hello @MC_TEF,

Thanks for writing in!

You can make use of the Content Area Off Canvas element if you are editing in Pro Content editor.

Or use Navigation Layered element if you are using the header builder:

And lastly, please create your slider and make sure that the Slider Layout is set to “Auto”. You can then insert the Classic rev Slider element inside a column.

Hope this helps.

Thank you for the response…

I have tried both off & nav, but I don’t know how to make it open in the same column, looking at the attached pic above, you will see that in the demo of pro, they have an off-canvas that opens in the same column, that what I want to do, and I can’t figure how to make that happen.

I have a row with 2 columns, I want to trigger from the left column and it open in the same left column, not from the side of the page, just like it does in the pic, they did it on the right column.

I would like to use this multiple times on the page I am working on.

I will try what you said about the revslider, thanks.

MC

Setting rev to auto worked, thanks brother for the help & information.

Still cannot figure out the off-canvas.

Hello @MC_TEF,

The Off-canvas will display at the side of the page. At the moment, there is no off-canvas effect that can only be displayed within the columns. Please be advised that the page, https://theme.co/pro/, is our sales page. Most of the elements on the page were custom-built which may not be available as an element in the Pro editor.

Hope this helps.

Ok, that is disappointing, I was figuring that was a custom.

Sorry for that.
We’ve added this as a feature request so it can be taken into consideration for future development.

No worries, I do hope that you add that, that was cool the first time I seen it on the sales page, that would be cool to use on many of the sites I build…

I do have a question, I set up an off-canvas, works great, but what I want to do is move the text link to the footer to toggle the canvas, I went in an inspected the toggle, grabbed the link in the inspector, pasted in to theme options footer text box, worked great, but now I do not want the 1st active link visible or seen by mouse over, I just want to be able to have it active in the footer.

Can that be done easily, I am not a coder.

Hey @MC_TEF,

Can you please share your URL so that we can check the off canvas you have added in your footer? We need to check it first so that we can give you a more detailed and custom solution that you may need.

Thank you in advance.

I took it out of the footer, made a button as normal…

I need help with something, I addwd another off canvas and want to embed 3 videos in it, but the vids do not show, do I need to wrap the embed codes, in something or how would you do it?

Thank you for helping me over the past couple days with my questions, do appreciate it.

Hi @MC_TEF,

No need to wrap it on another html.
Can you share the URL of the page with this off canvas with video so we can see?

You’re always welcome.

question, i am using s2member plugin, i need to lock down a button or the entire column, I do not know where to put the s2 shortcode, it’s not like using a text element, I have specific text wrapped in the shortcode to give specific access

but i can’t figure out how or where to enter the sc on anything that isn’t a text element.

And this ? is about pro theme, not s2member, how & where to enter code like this.

Also using the integrity dark theme, from what I can tell I have all body font & headings a white or light color, the wordpress login fields show up with the dark background and a dark font, can’t figure out how to change the font to a white color so it can be seen

example attached

Hello @MC_TEF,

Regretfully S2 member plugin is not supported in Pro Editor or Cornerstone. You might need to insert the S2 shortcode in the content area element along with the contents that needs to be protected.

To change the color to white, please go to X/Pro > Theme Options > Typography > Body and Content and then select the color in the color picker.

Hope this helps.

I don’t think you get my question, about adding the shortcode to a column.but anyway the setting in typography is set to white, it does not change the login field font color when typing, it is still black, so I have black on black… when I change to design mode light it changes, if I choose a different stack, it changes, but not in dark mode integrity

I have the same issue on 2 other sites using pro, the login fields are black bkgrd with black font, is there some css code you can give me that fixs it, so i can be done with it

Hello @MC_TEF,

To change the color, please make sure of this custom css:

select, textarea, input[type="text"], input[type="password"], 
input[type="datetime"], input[type="datetime-local"], input[type="date"], 
input[type="month"], input[type="time"], input[type="week"], 
input[type="number"], input[type="email"], input[type="url"], 
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { 
    color: white !important;
}

We would love to know if this has worked for you. Thank you.

It worked, thank you

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.