Content area off canvas as link — 2

Hello, X-Masters.

Please look at my past topic and help me :slight_smile:

I did all that was recommend but had no result :frowning:

I want open “content area off canvas” via link in text area of “Heading” element.

I use “Heading” (please look at my screenshot) and want to open “content area off canvas” to show more details for my users.

Please teach me do it cool :slight_smile:

Thank you.

Ohhh! Excuse me! I forgot add class to element! All right! It is works!

But… how I can hide button of “content area off canvas”?

Thank you.

Hi Dmitry,

You can do that by adding this code in the Element CSS of the Content Area Off Canvas element:

$el {
    display: none;
}

Hope this helps.

Hello,

It is good.

But… it is killed my text link (text link does not work after I hide element via CSS).

I need to safe “Content Area Off Canvas” as the text link and hide toggle.

“Off canvas” is active by click to text link and to toggle button. I want to hide toggle and use text link only.

I have idea to make toggle button invisible (via toggle design and setting) and remove it to footer area (or other part of site). But… it is does not good.
Good is absolutely hide it.

Hmm… but if I hide it…how I will edit it… I just will can not see an elements )))

Ok. However I will wait your professional tip.

Will be cool hide the element from users and stay it visible for admin.

:roll_eyes:

Hi @IvchenkoDV,

To achieve that, you can add the code below in Theme Options > CSS

.my-toggle { display:none; }
.logged-in .my-toggle { display: inline-flex !important; }

Hope that helps

Look at result please ->

Maybe I should change “inline-flex” to another parametr? :expressionless:

“display: block” is good looking :grinning:

Thank you very much for you fast help!

You’re most welcome, @IvchenkoDV.

Excuse me…
Desktop version is good but mobile view does not work - text link give no action.
Are you know where maybe a problem?

Hi @IvchenkoDV,

It doesn’t work if set to displayed none. What you can do is just make it invisible.

Please change the css code to this

.my-toggle { box-shadow:none; }
.logged-in .my-toggle { box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.25); }

Hope this helps

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