Solution 1 :

<nav class="navbar navbar-default navbar fixed-top">

Just remove “-” between navbar and fixed top

Problem :

On my website, I am using the navbar-fixed-top class as per bootstrap’s docs. I want my nav to stay fixed but unfortunately the position becomes relative upon viewing the page source. Here is my code.

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="navId">
            <li class="nav-item">
                <a href="{{ url_for('home')}}" class="nav-link active">Home</a>
                <a href="{{ url_for('notebook_reference')}}" class="nav-link active">Work</a>

I am quite confused on this. I believe I have followed this example properly. If someone knows my error here, let me know!

One more thing. I have NOT overriden any styles of bootstrap.