Here is the app that I have developed: 
<http://azeribocorp.pythonanywhere.com/index/>

When I click on `Search` in the menu, the navbar shifts down, I cannot find where the problem is. I want the menu to be always fix on the top of the page. Any help is appreciated.

**\_\_base.html:**

```
    {% load staticfiles %}

    <!DOCTYPE html>

    <html lang="en" class="no-js">
        <head>
            {% block meta_tags %}{% endblock meta_tags%}

            <title>
                {% block title %}Azeribo Tracking{% endblock title %} 
            </title>

            {% block stylesheets %}         {% endblock %}      
            {% block javascript %}          {% endblock javascript %}       
            {% block extra_head %}          {% endblock %}
        </head>

        <body>
            <header class="topnavbar">
                {% include 'aztracker/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        </body>
    </html>

```

**\_topnavbar.html**

```
{% load static %}
{% load staticfiles %}

<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
    <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>

<!--Top Navigation-->
<nav role="navigation" class="nav">
    <ul class="nav-items">
        <li class="nav-item">
            <a href="/index/" class="nav-link"><span>Home</span></a>
        </li> 
        <li class="nav-item ">
            <a href="#" class="nav-link"><span>Track Container</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                </ul>
            </nav>
        </li> 
        <li class="nav-item">
            <a href="/search/" class="nav-link"><span>Search</span></a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link"><span>Report</span></a>
        </li> 
        <li class="nav-item dropdown">
            <a href="#" class="nav-link"><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li>  
    </ul>
</nav>

```

**search\_form.html**

```
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}

{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <body>
            <section class="search_section">
                <form  method="POST" action="/search/">         
                    {% csrf_token %}
                    <input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">             
                    <button id="search_btn">Search</button>
                </form>
            </section>
        </body>         
    {% endblock main_col %} 
{% endblock content %}

```

**\_topnavbar.css**

```
* {border:1px black solid;}
.topnavbar {
    background-color: rgba(0,100,150,0.6);/*rgba(0,255,150,0.6);/*#3EDC99*/
}

html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

body {
    background-color: #3498db; 
}

.nav {
    width: 550px;
    margin: 0 auto 0 auto;
    text-align: center;
}

/* Navigation */

.nav {
    font-family: Verdana, Georgia, Arial, sans-serif;
    font-size: 14px;
}

.nav-items {
    padding: 0;
    list-style: none;
}

/* color of menu links
span    {

    color:yellow;
}
*/

.nav-item {
    display: inline-block;
    margin-right: 25px;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-link,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active,
.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    display: block;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    color:#fff;
}

.nav-link ,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active {
    color: #fff;
    font-weight: bold;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:hover::before {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
}

.dropdown {
    position: relative;
}

.dropdown .nav-link {
    padding-right: 15px;
    height: 17px;
    line-height: 17px;
}

.dropdown .nav-link::after {
    content: "";
    position:absolute;
    top: 6px;
    right: 0;
    border: 5px solid transparent;
    border-top-color: #fff; /*small triangle showing drop down menu*/
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    width: 200px;
    margin-left: -100px;
    background: #fff;
    border-radius: 3px;
    line-height: 1.46667;
    margin-top: -5px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity:0;
    -webkit-transform: translate(0, 0) scale(.85);
    transform: translate(0, 0)scale(.85);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.submenu::after, 
.submenu::before {
    content: ""; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    height: 0;
}

.submenu::after {
    border-bottom-color: #fff;
}

.submenu::before {
    margin-left: -13px;
    border: 13px solid transparent;
    border-bottom-color: rgba(0,0,0,.1);
    -webkit-filter:blur(1px);
    filter:blur(1px);
}

.submenu-items {
    list-style: none;
    padding: 10px 0;
}

.submenu-item {
    display: block;
    text-align: left;
}

.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    color: #3498db;
    padding: 10px 20px;
}

.submenu-link:hover {
    text-decoration: underline;
}

.submenu-seperator {
    height: 0;
    margin: 12px 10px;
    border-top: 1px solid #eee;
}

.show-submenu .submenu {
    opacity: 1;
    -webkit-transform: translate(0, 25px) scale(1);
    transform: translate(0, 25px) scale(1);
    pointer-events: auto;
}

.submenu-link{
    color:red;
}

```

**search\_form.css**

```
* {border:1px black solid;}

```