Top navbar moves when clicking on a specific menu item

Question

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;}

why do you use the main_col block inside the content block? and why do you use the "body" tag inside a template? (you already put it on __base.html) — Nazkter, Sep 20 '17 at 19:34

score 1 · Accepted Answer · answered Sep 20 '17 at 19:29

It seems you have a rouge Unicode character in you html. Inspecting the page source after you click "search" reveals the Unicode character as &#65279. this character is 'ZERO WIDTH NO-BREAK SPACE'.

It will not be seen in you text editor since it parses the characters. You can try to open your code in Notepad or some texteditor that does not understand Unicode and try to remove it from there.

It is also worth pointing out that your content is displayed in your tag

Foud out about the character from RHSeeger's answer here

Hope this helps!

I simply encoded it in UTF-8 using Notepad++ `Encoding>Encode in UTF-8` and save the file and this way the hidden character will be gone. — Ibo, Sep 20 '17 at 21:07

score 1 · Answer 2 · answered Sep 20 '17 at 19:52

You are breaking your HTML at some point, I can see some problems in the construction of your templates.

first:

you are including a head tag inside your body tag (_topnavbar.html)

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

This should be inside the "extra_head" block, like this (_topnavbar.html):

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

Second: you are adding an extra body tag inside your body tag (search_form.html):

{% 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 %}

You must delete that body tag.

third:

you are adding a script in a wrong way (_topnavbar.html):

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

you can add it this way:

<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>

maybe you have more errors, you should review your code line by line and find all the other problems.

I hope this answer works for you, have a good day.

thank you so much for reviewing and pointing to the errors. I made all the changes, but the 3rd change shows an error when I am inspecting the rendered page. This is the error `127.0.0.1/:26 GET http://127.0.0.1:8000/static/css/_topnavbar.js net::ERR_ABORTED` the js file works, but why chrome shows me this error I don't know! — Ibo, Sep 20 '17 at 21:05
Never mind, I found it. css must be js in the address. the js file is in the js folder and not css — Ibo, Sep 20 '17 at 21:11
I'm glad that my answer helps you, if it solves your problem, you can set it as the correct answer, have a good day. — Nazkter, Sep 20 '17 at 21:13
I upvoted you which should give you 10 points. In fact another person gave an answer that solved the problem in my question, but your input also helped a lot and I don't know how else I can return your favor. Let me know if you have a suggestion. — Ibo, Sep 20 '17 at 21:23
That's ok, I didn't know that the other answer was the correct. — Nazkter, Sep 20 '17 at 21:32

score 0 · Answer 3 · answered Sep 20 '17 at 19:25

0

On all children pages (including search), try adding this to your CSS:

body {
margin: auto;
}

answered Sep 20 '17 at 19:25

Emma Earl Kent

498
5
12

Top navbar moves when clicking on a specific menu item

3 Answers3