How to keep the user bar placed correctly

You see, in my project I have this code for the user bar:

<header style="width: 100%; position: fixed; z-index: 100;">
    <nav class="navbar navbar-expand-md navbar-laravel" style="background-color: #0077FF;">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}"><h2>El Aullido Vespertino</h2></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto">
                    @include("navegaciones.".\App\User::navegacion())
                </ul>
            </div>
            @if(auth()->user() && auth()->user()->activado)
                <img class="card-img-top" style="width: 50px; height: 50px;" src="{{url(auth()->user()->ruta())}}"/>
            @endif
        </div>
    </nav>
</header>

By using position:fixed; I am telling the program that even if the bar goes down, it must be displayed in the same area, but it gives me this result:

The bar is eaten the higher part, since what was below "goes up". How do I avoid this setback? For now I have fixed it with a few <br> , but I would like to know if there are other ways.