Cut The Ribbon: Remove the Ribbon in Nintex Forms for Office 365

The ability to add custom CSS (inline and through external files) in Nintex Forms for Office 365 allows you to can change the way the new/edit/display forms look. 

For Example, let's look at removing the ribbon in your Nintex Form.

The Build

Here is a general out-of-the-box Nintex Form (in Office 365), but we want to hide the ribbon:

The Code

To find the CSS Class we need to change, use the Developer Tools built into the browser you are using (F12 for Internet Explorer) and select the element you wish to hide.

Select Element Icon

Now that we found the <div> the ribbon lives in and the CSS class applied to it, we can find the parent <div> and class and add the correct CSS in order to collapse the element.

Go back to the Nintex Forms Designer and Select Form Settings > Custom CSS.

Once there, add the following CSS:

.nf-ribbon-fixed-top {
visibility: collapse;

Click Save and then Publish your form.

The Result

When you open the form again, you will see the ribbon is no longer there:

Feel free to leave any questions or comments and remember to check out Nintex Connect for awesome information on all thing Nintex!