# Persistent left nav / sidebar tutorial **URL:** \ **Category:** Design\ **Created:** [November 17, 2020, 11:16pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078 "2020-11-17T23:16:10Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![tdhi](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tdhi](https://forum.adalo.com/u/tdhi)\ **Post date:** [November 17, 2020, 11:16pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/1 "2020-11-17T23:16:10Z")
Hi all, if anyone can point to a cloneable resource or tutorial for the persistent left navigation screen, would really appreciate it, thanks! On my web app I’m redesigning (ugh) to remove the top section and replace with an app bar with a hamburger menu left icon. I’m guessing that upon click, the action will be to link to the persistent left nav screen (on all screens with the hamburger icon), and then follow on links from there to other screens within the app. The problem I’m having is that on desktop web, the sidebar expands too much and takes up almost half the screen. I haven’t changed any settings from the template provided by Adalo. ---
**Author:** ![AddyEdwin](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@AddyEdwin](https://forum.adalo.com/u/AddyEdwin)\ **Post date:** [November 18, 2020, 5:35am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/2 "2020-11-18T05:35:57Z")
I also ran into the same problem you mentioned. One workaround for this that _might_ work (haven’t tested it out yet), is to set the size of the screen to 1920 x 1080, and resizing everything according to that. I don’t know if it will work, but one of the things I’ve been planning to test to fix this problem Also you might check these earlier questions out: > [@How To Create a Navigation Menu with app bar?](https://forum.adalo.com/t/how-to-create-a-navigation-menu-with-app-bar/944/3): > > Hi Ben, The menu on the adalo product page in the images at the top. (Custom web domain & Google play). > [@Persistent left Screen](https://forum.adalo.com/t/persistent-left-screen/1812/4): > > Hey Jeorge, It looks to me like a layering issue. Your left navigation bar on the right is positioned above the payments screen on the right. When clicking on the whole screen, you will see a list of all of the pages components. You can drag these components to change their order. Make sure the shape and text you have on the page are positioned above the grey sidebar It also looks like your sidebar isn’t grouped with the navigation options (Payments, Maintenance, Inbox etc). Grouping componen… ---
**Author:** ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)\ **Post date:** [November 18, 2020, 10:02am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/3 "2020-11-18T10:02:48Z")
Hi @tdhi, An additional advice to @AddyEdwin’s one: you could also try to put rectangle on your right side of the screen - between the left nav bar and screen edge. And then put all the content inside this rectangle. What could be expected - with this rectangle both parts (left & right) may start to resize proportionally. * * * Some side notes: But building responsive web app is not an easy task, unfortunately :frowning In my experience, designing a desktop web app is always done via trial & error. As I understand, in most cases visual components in Adalo are responsive; so they try to keep _proportions_ but not the exact pixels. However, in some cases the “fixed width” rules appear: usually when you have a small width elements, they remain fixed, while others which are “wider” are responsive. I’ve spend quite a bit of time experimenting, see this thread & video for example: > [@Help needed for desktop app](https://forum.adalo.com/t/help-needed-for-desktop-app/3598): > > Hello! is there a method to make a desktop app responsive. I know that the feature is not in place yet, but I noticed by using card list instead of a custom list it works better for example. Are there other kinds of stuff to know? I noticed that the text and buttons are moving around when using them is a custom list… thanks for your help. Best, Victor ---
**Author:** ![tdhi](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tdhi](https://forum.adalo.com/u/tdhi)\ **Post date:** [November 18, 2020, 11:30pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/4 "2020-11-18T23:30:13Z")
Thank you everyone. What worked for me was placing a rectangle component over the entire left navigation bar, and grouping it with the left navbar, making sure that the background color was off. Now, does anyone know if it’s possible to create active/inactive colors upon cursor hover in a web app? The default Adalo left navbar component comes with a gray bar over the link/text “About”, as if it were active. I’m just going to remove it. ---
**Author:** ![tjhc2](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@tjhc2](https://forum.adalo.com/u/tjhc2)\ **Post date:** [January 7, 2021, 6:08pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/5 "2021-01-07T18:08:26Z")
As above, when I try to implement a side nav bar, my sidebar expands too much and takes up half the screen. The solution @tdhi suggests (adding a transparent rectangle on top) fixes the layout going crazy but then you can’t tap on any of the buttons behind the rectangle. Does anyone have a solution? ---
**Author:** ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)\ **Post date:** [January 8, 2021, 11:55am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/6 "2021-01-08T11:55:14Z")
Hi @tjhc2 , As I think, possible solution could be limiting the height of this transparent rectangle to 0 or 1. Best regards, Victor. ---
**Author:** ![tjhc2](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@tjhc2](https://forum.adalo.com/u/tjhc2)\ **Post date:** [January 8, 2021, 3:26pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/7 "2021-01-08T15:26:45Z")
Hi @Victor, thanks for the reply. Do you have an example of this working I can see? I can’t get it to work. ---
**Author:** ![dhmedia](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dhmedia/32/6312_2.png) [@dhmedia](https://forum.adalo.com/u/dhmedia)\ **Post date:** [January 8, 2021, 4:26pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/8 "2021-01-08T16:26:13Z")
I have tried many methods - read all kinds of forum examples, etc and I have been unable to create a sidebar navigation that is workable for my web app. Having a vertical scroller that works in the same manner as the horizontal scroller would be a great fix for this. This has actually been a big roadblock for the web/tablet app I am developing. ![VERT_SCROLL](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/9/9a666e47c147d6202e699d2a27defc61042f3255.gif) If this is currently possible and I’m just not finding it… please let me know. 🙂 ---
**Author:** ![hobokencloud](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/hobokencloud/32/1589_2.png) [@hobokencloud](https://forum.adalo.com/u/hobokencloud)\ **Post date:** [January 9, 2021, 5:52am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/9 "2021-01-09T05:52:28Z")
Hi @tdhi – It took me an extreme amount of time to figure out why the sidebar would expand across the screen. Not to mention the frustration with Adalo editor. So I hope this can help in some way. I am still trying to get it to behave the way I needed it to, but is a good start. There are many factors that go in to make it work just right and depending on your layout or design you will more than likely need to experiment a bit more. Some factors, - Visual Layering - Component Ordering (Extremely important) related to what gets printed first on the page - Screen size - Groups - Spacing (or lack thereof ) Setup: [![](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/7/37c3b58de820ce14dbbae3b4582b1343cc212369.jpeg "Adalo Left Navigation Setup") ](https://www.youtube.com/watch?v=OneVb4ksPsA) Preview: [![](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/1/6/1616cd8be5d23d6714a0a02dcf9e1a11f987039e.jpeg "Adalo Left Navigation Front End") ](https://www.youtube.com/watch?v=5myUVB06oE8) The hide and unhide button is just a true/false toggle on the user collection. And the white expandable menu section is set to only visible if condition is true. ---
**Author:** ![rkeehan](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@rkeehan](https://forum.adalo.com/u/rkeehan)\ **Post date:** [January 11, 2021, 8:23pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/10 "2021-01-11T20:23:48Z")
hay there. This looks awesome. How do you show and hide and set up the actions etc. I feel like it should be easier than I am trying to build. If this is just a test any chance you can clone it for me? ---
**Author:** ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)\ **Post date:** [January 22, 2021, 9:23am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/11 "2021-01-22T09:23:55Z")
Great job @hobokencloud! Perfect solution! Best, Victor ---
**Author:** ![hobokencloud](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/hobokencloud/32/1589_2.png) [@hobokencloud](https://forum.adalo.com/u/hobokencloud)\ **Post date:** [February 14, 2021, 8:17am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/12 "2021-02-14T08:17:25Z")
Hi @rkeehan – I made this clonable app so you can see how to apply all of the above in your project. > **[CMS Layout](https://hobokencloud.adalo.com/cms-layout)** > > Built with Adalo ---
**Author:** ![OS11](https://avatars.discourse-cdn.com/v4/letter/o/e68b1a/32.png) [@OS11](https://forum.adalo.com/u/OS11)\ **Post date:** [March 8, 2021, 5:39am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/13 "2021-03-08T05:39:35Z")
@hobokencloud - thanks for this. A relief to see that this was possible. Is there any way we can access this or can you provide a little bit more information on how you were able to put this together (for newbies 😊)? ---
**Author:** ![StuJLans](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@StuJLans](https://forum.adalo.com/u/StuJLans)\ **Post date:** [March 25, 2021, 9:23am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/14 "2021-03-25T09:23:26Z")
I love this template, it is awesome! I am just curious if it is possible to make the expanded menu be scrollable? I am planning to add a bunch more items to it and then have sub menus appear when the items are clicked. With this, it is making the menu a bit larger so if the user could scroll on this menu that would be perfect! Any ideas on how I could make this happen? ---
**Author:** ![Springs11](https://avatars.discourse-cdn.com/v4/letter/s/8e8cbc/32.png) [@Springs11](https://forum.adalo.com/u/Springs11)\ **Post date:** [March 29, 2021, 3:18pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/15 "2021-03-29T15:18:58Z")
Hi @hobokencloud, @anon78309838 Can you help with information (tutorial / clonables) on how to create this image showing dashboard with left nav on app. Thanks! ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/d/d23432b2af984082a405c75b3db744065ef804a5.png) (upload://tZy6mj0tfzFiRLP43Jhz1X5wkHX.png) ---
**Author:** ![scientist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/scientist/32/10049_2.png) [@scientist](https://forum.adalo.com/u/scientist)\ **Post date:** [May 19, 2021, 3:47pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/16 "2021-05-19T15:47:50Z")
How can this work in mobile app?? When we click on a menu item it opens the linked screen, but when we click back on the other screen it again takes us to the menu screen. ---
**Author:** ![Michael](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/michael/32/3120_2.png) [@Michael](https://forum.adalo.com/u/Michael)\ **Post date:** [May 19, 2021, 5:09pm UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/17 "2021-05-19T17:09:31Z")
Instead of using “back”, go to the screen you want to return to ---
**Author:** ![scientist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/scientist/32/10049_2.png) [@scientist](https://forum.adalo.com/u/scientist)\ **Post date:** [May 20, 2021, 3:36am UTC](https://forum.adalo.com/t/persistent-left-nav-sidebar-tutorial/6078/18 "2021-05-20T03:36:50Z")
I meant the back button on the phone. we can’t force user to click on our own link. They can simply click phone’s back button. Anyway, I used the same trick as for the web. Put all options on a rectangle in a group and then hide or unhide that group based on view menu toggle.