Flask 12 – Add a Navigation bar to the blog

Let’s add a nav bar to our blog. This is the post number 12 about this argument. Go to read the other post if you want. This time we are going to add a very simple nav bar to the site we are building with the framework flask for python. This is very easy to learn and very useful, making us ready to create a blog in no time at all, after a little of playing around flask.

The code added to the template is this

This goes in the head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This is the style

<style>
      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      .topnav {
        overflow: hidden;
        background-color: #333;
      }
      
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }
      
      .topnav a:hover {
        background-color: #ddd;
        color: black;
      }
      
      .topnav a.active {
        background-color: #4CAF50;
        color: white;
      }
      
      .topnav .icon {
        display: none;
      }
      
      @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
          float: right;
          display: block;
        }
      }
      
      @media screen and (max-width: 600px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
        }
        .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
        }
      }
      </style>

Put the style in the head before:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

In the body put the nav bar

      <div class="topnav" id="myTopnav">
        <a href="/" class="active">Home</a>
        <a href="/about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </div>

It is the simpliest nav bar ever, but it is nice and will become bigger in the next lessons.

At the end, before the ending tag of the body, you put this script

<script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
      </script>

The video explanation of the changes in the template.html file

In the following video you can see the details about creating the nav bar and were we took the code.

To be coninued.