Hiding the app navigation bar

App Building
1

Hi,

We are embedding retool apps in SharePoint pages, and would like to be able to lock the web part to present only the retool app we have linked, but only when access via the SP page. Is it possible to turn the app navigation bar off for this purpose?

Thanks,

Joshua

2

You could potentially issue some custom CSS to hide the Navbar, but this will apply to the page / application even when within the editor.

I do not recommend hiding the navbar, but it is possible to hide via custom CSS within a text component.

EDIT:

There is also a URL parameter that you can add of ?_embed=true to hide the nav bar UI

1 Like
3

Thanks Justin, we’ll give this a try!

Cheers,

Joshua

4

That def helps to cleanup the page, but it still leaves almost the entire top just a blank space instead. I would very much like to recover this space so I can more easily fit the entire app on a single page. Is there a way to do that? Maybe some conditional css that checks if user is in Edit or Preview mode?

5

This should allow you to remove the top canvas margin in presentation/user mode :)

You can add this through the menu in the top right of the editor, in the scripts and styles menu.


.presentation-canvas-padding .retool-canvas-container {
    margin-top: 0px;
}
6

This is what worked:

.presentation-canvas-padding .retool-canvas-container--with-pill {
    margin-top:0px
}

With this space savings plus the new Header section I can now put a menu at the top of my apps and keep everything above the fold!

7

Awesome! Thanks for the update :) Now I can save this for future use. Cheers!