# Fixed (non-scrollable) content in Ionic + Vue mobile app **URL:** \ **Category:** Ionic Vue\ **Created:** [August 22, 2023, 10:55am UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756 "2023-08-22T10:55:03Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![sc0](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@sc0](https://forum.ionicframework.com/u/sc0)\ **Post date:** [August 22, 2023, 10:55am UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/1 "2023-08-22T10:55:03Z")
Hi, is there any alternative to placing content inside an ion-header and ion-toolbar to make it fixed on top of the screen and not scroll? I’m asking because I have some troubles with headers and toolbars with transparent backgrounds during page transitions. Thanks and cheers! ---
**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\ **Post date:** [August 22, 2023, 2:46pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/2 "2023-08-22T14:46:50Z")
You might be running into a similar issue I had. Make sure all of your `IonHeader` content is within an `IonToolbar`. You can have multiple `IonToolbar` elements in your header. If there is some content outside a `IonToolbar` you will get weird transition issues. Otherwise, yes, you can have a fixed header without using `IonHeader`. Just use normal CSS. ---
**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\ **Post date:** [August 22, 2023, 4:47pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/3 "2023-08-22T16:47:09Z")
I tried to find my previous post about this earlier but couldn’t. Here it is. > [@Non-scrollable area](https://forum.ionicframework.com/t/non-scrollable-area/234306/4): > > I took a quick look and appears you did the same thing that I did at first which caused transition issues sweat_smile I found that you cannot have content in the header outside of IonToolbar, otherwise you’ll get content overlapping during transition. You either need to not use IonToolbar or make sure everything is wrapped in an IonToolbar. You can have multiple IonToolbar’s in an IonHeader which is what I did to fix it. Not sure if this is a bug in Ionic or not thinking Try this: \ **Author:** ![sc0](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@sc0](https://forum.ionicframework.com/u/sc0)\ **Post date:** [August 22, 2023, 8:08pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/4 "2023-08-22T20:08:38Z") Unfortunately I discovered that I still run into issues in certain situations. I’m wrapping everything fixed in headers and toolbars, but I still get the issue with multiple visible layers during transitions. I have a funny quirk in my app. There are pages A, B and C. A → B causes no issues A → C causes no issues B → C does the weird stacking thing B → A (backward) causes no issues The only difference with page B is that there’s only one toolbar present in the header. I tried adding a second, empty toolbar, but that didn’t fix the problem. I think it might be related to the height of the header. Perhaps it’s also a matter of what’s being stacked. I was thinking about going with regular CSS, but I think the scrollbar will be an issue. ---
**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\ **Post date:** [August 22, 2023, 8:20pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/5 "2023-08-22T20:20:39Z")
I feel like there should be a solution without going regular CSS. Can you provide a StackBlitz with the issue? ---
**Author:** ![sc0](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@sc0](https://forum.ionicframework.com/u/sc0)\ **Post date:** [August 23, 2023, 3:56pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/6 "2023-08-23T15:56:07Z")
I think I begin to grasp what’s going on. ion-app, ion-page and ion-header don’t have a background but ion-toolbar and ion-content do. I want to work with a gradient background, so this is complicating things. But I’m starting to see where the issues arise. It’s a matter of what elements are translated and being changed in opacity, how they’re stacked (forward vs backward), and if elements are involved that are more notable at reduced opacity than others. A solution might be to give ion-page a background and write a custom animation. I’ll investigate further. ---
**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\ **Post date:** [August 23, 2023, 3:59pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/7 "2023-08-23T15:59:12Z")
What do you want to have a gradient background? I’ve got an `IonHeader` with one. ---
**Author:** ![sc0](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@sc0](https://forum.ionicframework.com/u/sc0)\ **Post date:** [August 23, 2023, 10:29pm UTC](https://forum.ionicframework.com/t/fixed-non-scrollable-content-in-ionic-vue-mobile-app/235756/8 "2023-08-23T22:29:42Z")
I was thinking the whole screen and put it on the body initially 😬 😇