ionic-frameworknuxt.js

Nuxt ionic bottom navigation bar Not fixed

use I used https://ionic.nuxtjs.org I created a bottom navigation bar using html css and placed it within NuxtLayout, but when the page is larger than the screen size (it has scroll), the bottom navigation bar moves.. An example of what I mean: enter image description here Note that the website version does not do this, this is when I installed it as an Android application on my device.

It is true that it returns to its place after I lift my finger, but I do not want it to be affected by (the scroll reaching the end).

What I did is:

npx nuxi@latest module add ionic

And :

ssr: false

And :

ionic integrations enable capacitor
ionic capacitor add android
npx nuxi generate
npx cap syn
npx cap run android

And some settings in the nuxt.config file

UPDATE

Please note that I do not use any ionic elements and I did not add <ion-router-outlet> or <ion-app> either.

The problem may be solved by using the elements made by ionic.

Solution

  • Ionic provides ion-footer component. https://ionicframework.com/docs/api/footer