Enable/Disable Buttons

Support
#1

Using Pro, is there an enable/disable option for buttons?

#2

Hi there,

This option is not available using Pro because the main use of a button is to serve as a link and disabling it would defeat its purpose.

If what you are after is to display an element that looks like a button, you can add an HTML with the X button class in a Text element like this:

<span class="x-btn x-btn-global">Click me</span>

#3

In my header I have five buttons. For whatever reason, I wish to have one of the buttons be disabled… Is that an option?

#4

Hey @timothy007,

Does your setup look like this?

You can delete the button by clicking on the trash can icon.

To disable/hide a button, click on the magnifying glass icon, go to Customize in the Button’s Control Navigation.

Then, click all the icons in the Hide During Breakpoints option.

That should hide your button for all screen sizes.

For more Pro usage tutorials and tips and tricks, please see our Knowledge Base.

If this is not your setup, please give us the URL of your site so we could see your setup.

Thanks.

#5

Let’s say for example I have five buttons, and each button links to a different page. Each page is sharing the same header. When someone clicks the second button, they are taken to page 2. I would like the second button at that point to be disabled. Not hidden or deleted just… disabled. I understand that I could create a different header for each page but in a perfect world, Pro would allow me to disable a specific button.

#6

Hi There,

Thank you for the clarification, most commonly that kind of setup is done with a JavaScript but regretfully, that would fall outside of the scope of support that we can offer.

I could point you in the right direction though with a custom CSS solution, it is more tedious but It should do the trick.

First, you need to identify your page’s ID because we will be using this as the CSS selector later.

How To Locate Page/Post IDs

Then assign a unique CLASS for each of your buttons, you need this class to be different for each button because you don’t want the buttons to be disabled all at once, right?

screenshot

Now construct 5 blocks of custom CSS that looks like below, one block for each button.

.page-id-xxx .button1-class {
   pointer-events: none;
   cursor: default;
}

Replace the xxx with the actual ID of your page, and then replace the button1-class with the actual CLASS of the button that corresponds (linked) to that page.

Add your final composed custom CSS to Theme Options > CSS

Hope it helps,
Cheers!

#7

I understand that it requires some JS & CSS but it seems like it would be a nice feature for Pro. I was under the impression the main purpose of Pro was to reduce JS & CSS coding. :slight_smile:

The buttons I wish to enable/disable are part of a header. Your instructions included how to get an ID from a page but not a header… Do I use the page ID or the header ID?

#8

Hi there,

If the button is displayed throughout the website, you can simply add the button1-class class to the button and use this code in the custom CSS:

.button1-class {
   pointer-events: none;
   cursor: default;
}

Hope this helps.

#9

That worked… Thank you! :grinning:

#10

Glad that we could be of a help :slightly_smiling_face:

#11

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