My responsive navigation bar is not working properly

294
February 19, 2017, at 4:26 PM

I created a webpage using HTML,CSS,Javascript and bootstrap. And I created a navigation bar which is responsive for all types of devices. But the responsive navigation bar is not working properly. And also the image in this webpage is not properly view when open it on small devices.

base.html

{% load staticfiles %}
<html>
<head>
  <title>curriculamvitae</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="{% static 'css/biodata.css' %}">
  <link href="//fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css">
  <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="page-header">
    {% if user.is_authenticated %}
    <a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
    {% endif %}
    <h1><center>CURRICULAM VITAE</center></h1>
  </div>
<!--   <div id="wrap">
  <ul class="navbar">
    <li><a href="/">Home</a></li>
    <li><a href="#">Acadamic Qualifications </a>
      <ul>
        <li><a href="{% url 'niit' %}">PYTHON programming from NIIT</a></li>
        <li><a href="{% url 'bca' %}">BCA from Bharathiar University</a></li>
        <li><a href="{% url 'hse' %}">HSE from Board of Kerala </a></li>
        <li><a href="{% url 'sslc' %}">SSLC from Board of Kerala </a></li>
      </ul>
    </li>
    <li><a href="{% url 'contact' %}">Contact</a>
    </li>
  </ul>
</div> -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div id="wrap">
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
    <li><a href="#">Acadamic Qualifications </a>
      <ul>
        <li><a href="{% url 'niit' %}">PYTHON programming from NIIT</a></li>
        <li><a href="{% url 'bca' %}">BCA from Bharathiar University</a></li>
        <li><a href="{% url 'hse' %}">HSE from Board of Kerala </a></li>
        <li><a href="{% url 'sslc' %}">SSLC from Board of Kerala </a></li>
      </ul>
    </li>
    <li><a href="{% url 'contact' %}">Contact</a>
    </li>
      </ul>
    </div>
  </div>
</nav>
<div class="content container">
<div class="row">
<div class="col-md-16">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>

biodata.css

h1 a {
color: #FCA205;
font-family: 'Arial';
}
body {
padding-left: 0px;
}
.page-header {
border-radius: 30px;
background-position: 100px;
height: 120px;
background-color:  #8e8887 ;
margin-top: 0px;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
font-size: 45pt;
font-family: 'Leckerli One';
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Arial', cursive;
}
.date {
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a, .post h1 a:visited {
color: #000000;
}
#wrap   {
width: 100%; /* Spans the width of the page */
height: 50px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color: #403B3B;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #403B3B;
}
.navbar a   {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */ 
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar {
    background-color: #366b82;
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover    {background-color: #366b82;}
.niit {
color: #03011A;
font-family: 'Lobster';
}
.bca {
color: #03011A;
font-family: 'Lobster';
}
.hse {
color: #03011A;
font-family: 'Lobster';
}
.sslc {
color: #03011A;
font-family: 'Lobster';
}
.contact {
color: #000000;
font-family: 'Lobster';
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
  /* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

How can I clear the problem?

(The backend of this webpage was done in django.)

Rent Charter Buses Company
READ ALSO
How can i put image tag into bootstrap grid?

How can i put image tag into bootstrap grid?

I'm beginner in css and bootstrap,and have document whit this instruction:

497
Bootstrap navbar-fix-bottom overlaps content

Bootstrap navbar-fix-bottom overlaps content

I am working on a web that show results from a PHP file on a div element:

529
CSS cut off by javascript

CSS cut off by javascript

Could anyone explain this after I click my buttons?

402
How to set up dynamic style property to an object property

How to set up dynamic style property to an object property

Is there anyway I can set up a style property dynamically to an objects property? I tried the code below and got an error

308