CODEWITHSUNDEEP
htmlcssdjangobootstrap-4nav
benderenzi121
benderenzi121

Reputation: 1

Problems with fixing navbar to top of page

For some reason when running the following code my navbar seems to be stuck in the middle of my screen. Based on other nav's i've made before it should be fixed to the top so i'm super confused. any help is appreciated! 

<body>
    <div class="container-fluid">
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <div class="navbar-nav align-items-center">
          <a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Tech blog</a>
          <a class="nav-item nav-link" href="{% url 'about' %}">About</a>
          <a class="nav-item nav-link" href="https://www.github.com">Github</a>
          <a class="nav-item nav-link" href="https://www.linkedin.com">LinkedIn</a>
        </div>
        <div class="navbar-nav ml-auto">
          {% if user.is_authenticated %}
            <a class="nav-item nav-link" href="{% url 'post_new' %}">New Post</a>
            <a class="nav-item nav-link" href="{% url 'post_draft_list' %}">Drafts</a>
            <a class="nav-item nav-link" href="{% url 'logout' %}">Log out</a>
            <a >Welcome: {{ user.username }}</a>
          {% else %}
            <a class="nav-item nav-link" href="{% url 'login' %}" aria-label="Login">
              <span class="fa fa-user" aria-hidden="true"></span></a>
          {% endif %}
        </div>
      </div>
    </nav>
  </div>


    {# The actual blog posts#}
          <div class="content container-fluid">
                  <div class="col-md-8">
                    <div class="blog_posts">
                      {% block content %}
                      {% endblock %}

                    </div>
                  </div>
              </div>
    {# SCRIPTS#}
    <script type="text/javascript" src="{% static 'js/blog.js' %}"></script>

  </body>
</html>

image of my output:

Upvotes: 0

Views: 47

Answers (1)

patrickmacocks
patrickmacocks

Reputation: 11

change

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">

to

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">

Upvotes: 1

Related Questions