Sidebar Feature

Can you make a screenshot of the headers, just like I did?


Ok, I figured it out. You have to untoggle “preview data” otherwise it will not show the changes you made in the app itself even if you published it. Then you can use one of the magic links to check that the vertical header is indeed working for logged in users. No idea whether this is supposed to be like this or a bug…

1 Like

This is supposed to be like this, for now. Preview mode data to be disabled. Note also that preview mode (see screenshot), for now, only shows blocks without visibility condition or only with the visibility condition “Not loggedin users”.


1 Like

Hey folks preview (test/stage) and publish(live/production) are different but identical environments. Everything that works in live, works on preview too. However users in preview and published are different once.

I can customize the shortcuts displayed in the sidebar and move quickly to different tasks.

1 Like

The vertical orientation looks weird for me.

  1. It’s so far to the left it really is out of place.

Sorry I had to do two posts because as a new user I can’t add 2 images.

  1. When you resize the screen the other header begins to slide behind it. Unless there is something I am missing I don’t think it’s usable in this state.


You would need to use this code to make it work in a more responsive way, to reduce the width of the vertical header.
To be added in the custom code header of the page settings. You need to change #home-header by the name of your header (with #). Play with the two 240px in the code to see what it does.

That being said, yes having a navbar block or having the possibility to change the width of a vertical header is a classic, basic and higly requested feature that we all wait for.


@media only screen and (min-width: 992px) {
#home-header {
    margin-left: 0 !important;
.content[data-appid] > * {
  margin-left: 240px!important;
1 Like

Is this feature in Client View or just Admin view?

The lateral header (used as a lateral nav bar) is an option in any header settings => to be setup in the Softr studio, no option for the users to change it

1 Like

Just responded here.