Skip to main content

Responsive Navigation Bar code using bootstrap

Today I am going to show how to design a Navigation Bar using Bootstrap.
To do this first of all download the bootstrap files from getbootstrap.com . After downloading extract the three folders( CSS,fonts,Js) to a any folder dedicated to your website. Now open Notepad and copy the following code and save the file as an html file in the same folder(your dedicated folder where you added the earlier three folders).

Note-  I have intentionally left all links as #, you can add whatever link you feel like adding. also you can change the menu as per ur needs


<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width , initial scale=1.0">
   <title></title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
   
  </head>
  <body>
  <!---navbar starts-->
  <nav class="navbar navbar-inverse  navbar-static-top">
  <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>
      <a class="navbar-brand" href="#">Website</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
   <li><a href="#">About us </a></li>

       <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Social Network
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#>Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Google+</a></li>
 <li><a href="#">Instagram</a></li>
        </ul>
      </li>

        <li><a href="#">Contact Us</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<!---navbar ends-->

   <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
  </html>


Your Responsive Navigation Bar is Ready
This would give you the desired result you are looking for .Thank You.
Labels:

Comments

Post a Comment

Popular posts from this blog

SQL Injection ,Hacking PHP 4.4 sites in seconds

Today I am going to teach you how to hack a certain type of websites with very least efforts. Websites with PHP  4.4 have a SQL injection vulnerability in them which makes their Admin control panel easily accessible,and in just few steps you will access the admin's account of that website. Remember,this tutorial is applicable on PHP 4.4 machines with Apache running in parallel with them. Also,since I will be hacking REAL websites,I will not be displaying their URL’s or else I will be sued!!!. Also this tutorial is only for educational purpose. Here we go!!! Step 1 – Search for them Yep,make a Google dork to find sites running Apache and PHP 4.4 . Its quite easy.You can do this by searching inurl:adminlogin . Step 2 – Scan them Start by scanning them using Nmap ,Do and intense scan and find the open ports. If you find port 2000 open,then you have almost got it. most websites running PHP4.4 have this port for admin login. Now just login using port 2000 ie - ...
Post a Comment
Read more

Software Testing through Fuzzing

Fuzz testing or fuzzing is a software testing technique used to discover coding errors and security loopholes in software, operating systems or networks by inputting massive amounts of random data, called fuzz, to the system in an attempt to make it crash . Fuzzing is  often automated or semi-automated, that  involves providing invalid, unexpected, or random data to the inputs of a computer program. The program is then monitored for exceptions such as crashes, or failing built-in code assertions or for finding potential memory leaks. Fuzzing technique is commonly used to test for security problems in software or computer systems ans also used to discover coding errors and security loopholes in software, operating systems  or networks by inputting massive amounts of random data, called fuzz, to the system  in an attempt to make it crash. If a vulnerability is found, a tool called a fuzz tester (or fuzzer), indicates potential causes. There are two forms ...
Post a Comment
Read more

Bellmanford Algorithm C++ Program

The  Bellman–Ford algorithm  is an  algorithm  that computes  shortest paths  from a single source  vertex  to all of the other vertices in a  weighted digraph . It is slower than  Dijkstra's algorithm  for the same problem, but more versatile, as it is capable of handling graphs in which some of the edge weights are negative numbers. Here is the Source Code: #include<iostream> #include<stdio.h> using namespace std; #include<conio.h> #define INFINITY 999 struct node {     int cost;     int value;     int from; }a[5]; void addEdge(int am[][5],int src,int dest,int cost) {      am[src][dest] = cost;      return; } void bell(int am[][5]) {     int i, j, k, c = 0, temp;     a[0].cost = 0;     a[0].from = 0;     a[0].value = 0;     for (i = 1; i < 5; i++)     { ...
Post a Comment
Read more