# Custom Nav Bar?

**URL:** <https://community.thunkable.com/t/custom-nav-bar/2484950>\
**Category:** Questions about Thunkable X\
**Tags:** navigator\
**Created:** [June 27, 2023, 2:39pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950 "2023-06-27T14:39:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikediaz](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mikediaz/32/155764_2.png) [@mikediaz](https://community.thunkable.com/u/mikediaz)\
**Post date:** [June 27, 2023, 2:39pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/1 "2023-06-27T14:39:52Z")

</div>

Is there any way to create a custom navigation bar that remains static on a scrollable screen? I don’t want to use the navigator provided by thunkable. Also each screens navigator will be specific to the screen. It doesn’t necessarily need to be a nav bar. If i could make a list of icons in a layout or group remain static on a scrollable screen that would be fine as well.

---

<div class="post-metadata">

**Author:** ![ak\_coder](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ak_coder/32/156215_2.png) [@ak\_coder](https://community.thunkable.com/u/ak_coder)\
**Post date:** [June 27, 2023, 3:19pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/2 "2023-06-27T15:19:27Z")

</div>

@mikediaz ,Yes, its possible  
you have to divide your screen in two rows, 1st upper one for navbar, make your navbar inside this row, and add `height: fit-contents` to it, so that the navbar become of fixed size  
In the second row component, make your app, as you wanted, but make sure, to add `scrollable: true` to the row, and you can also give some `margin top` to the second row, so that it leave some space from nav

_ **Important note: Add `scrollable: true` to the second row not to the whole screen** _

 ![20a9b0f8-2979-43c0-ba36-e6204f8dace5](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/0/d084791f378637e47e63e410d4d067bb04420cd4.jpeg)  
 ![e22416f1-7eca-4687-ab1e-a04edfdecb65](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/2/a23183ebf1a0ab880028ba0bc7d2c2dd6b166eb0.jpeg)  
 ![fd2088df-4f6e-4be5-a0fe-3fbb9f861b0d](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/9/7931d979638422ad50724094e20cd44e421a02b4.jpeg)

---

<div class="post-metadata">

**Author:** ![ak\_coder](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ak_coder/32/156215_2.png) [@ak\_coder](https://community.thunkable.com/u/ak_coder)\
**Post date:** [June 27, 2023, 3:20pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/3 "2023-06-27T15:20:40Z")

</div>

If this solved your problem, then please mark this issue as solved and if you have any more query, then you can aks again

---

<div class="post-metadata">

**Author:** ![mikediaz](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mikediaz/32/155764_2.png) [@mikediaz](https://community.thunkable.com/u/mikediaz)\
**Post date:** [June 27, 2023, 5:19pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/4 "2023-06-27T17:19:32Z")

</div>

Thanks for the response! What would I use to split them? The Layout component?

---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [June 27, 2023, 5:35pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/5 "2023-06-27T17:35:50Z")

</div>

@mikediaz You can do the same thing in Drag and Drop projects using the [Layout](https://docs.thunkable.com/layout) component. Your top container for the menu would be one Layout and the body of the screen would be another Layout. Setting the properties of the second Layout as scrollable will allow you to achieve the “fixed” menu you’re looking for.

[Sample Project](https://x.thunkable.com/copy/e2a76fec145ac7472eb6103521e33a06)

---

<div class="post-metadata">

**Author:** ![mikediaz](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mikediaz/32/155764_2.png) [@mikediaz](https://community.thunkable.com/u/mikediaz)\
**Post date:** [June 27, 2023, 6:26pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/6 "2023-06-27T18:26:42Z")

</div>

You guys are great! I have one more question that’s completely irrelevant to this thread. I am creating an AI Image Generation application, and I am trying to start an API call on one screen, then complete the API call on the other. Is this possible on thunkable?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [September 25, 2023, 6:27pm UTC](https://community.thunkable.com/t/custom-nav-bar/2484950/7 "2023-09-25T18:27:17Z")

</div>

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