Vue3 displaying Component on top of rest of the content

this is my first question here. I am currently trying to expand my knowledge in the field of web programming and for this I am creating a test website with VueJS3. Here I have created a navbar as a component, which was set up with the Bootstrap plugin. The Navbar is "collapsing" in the Responsive Design in the mobile view. The rest of the content is then simply moved further down. Is there a possibility to put components on top of other content in Vue3 to avoid this? So that the navbar will collapse on top of the rest of the content without moving it?

Here is my code below:

Navbar.vue (Component)

<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <router-link class="navbar-brand float-left nav-highlight" to="/"></router-link>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto">
            <li class="nav-item active">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/1">1</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/2">2</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/3">3</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/4">4</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/5">5</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link nav-highlight navbarColor me-3" to="/6">6</router-link>
            </li>
        </ul>
        <ul class="nav navbar-nav me-right">
            <li class="nav-item">
                <router-link class="nav-link nav-highlight me-3 login" to="/login">Sign In</router-link>
            </li>
        </ul>
    </div>
</nav>
</template>

<script>
</script>

<style>
</style>

App.vue:

    <template>
     <div>
      <navbar/>
      <router-view/>
     </div>
    </template>

    <script>
      import Navbar from "@/components/Navbar.vue";

      export default {
        components: { Navbar },
      };
    </script>

    <style>
     #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
     }
    </style>