Make a response navigation bar using bootstrap _bootstrap

The so-called response navigation bar, is able to match the size of the form of the navigation bar, previously seen to feel very advanced, and now finally have the opportunity to write one of their own, first on a few effect picture.
This is the normal screen:

This is a mobile phone and other small screen:

Click on the right to display the menu

To implement this effect, first import the bootstrap framework

<link rel= ' stylesheet prefetch ' href= ' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ' >

There is also a very important point, you must remember to add the following sentence, otherwise when the screen changes hours click that menu button will not respond:

<script src= ' http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js ' ></script>
< Script src= ' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js ' ></script>

Next, if you want to make it responsive, you need to place its contents in the. Collapse Navbar-collapse.

The next step is to put the code, where sr-only is used by people with dyslexia, which is not the point.
Important attention three places, Data-target,navbar-fixed-top,navbar-right.
Data-target: Indicates where the content to be populated is coming from, and you can see that the ID in the Data-target in the code is the same as the ID in the div below.
Navbar-fixed-top: Indicates that the navigation bar scrolls with the page, does not disappear after the page is moved down, and the same is navbar-fixed-bottom.
Navbar-right: The effect is to position the components on the navigation bar to the far right, as well as the navbar-left. And as for the screenshot of why those options are still a little distance away from the far right of the screen, because there is a layer on the top. Container.

Html:

<link href= "https://fonts.googleapis.com/css?family=Abril+Fatface| comfortaa| Yellowtail "rel=" stylesheet "> <nav class=" navbar navbar-default navbar-fixed-top "role=" navigation "> <div class= "Container" > <div class= "Navbar-header" > <button type= "button" class= "Navbar-toggle" Data-togg le= "collapse" data-target= "#navbar-menu" > <span class= "sr-only" > Switching navigation </span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></s pan> <span class= "Icon-bar" ></span> </button> <a href= "#" class= "Navbar-brand na
      V-title ">YinyouPoet</a> </div> <div class=" collapse navbar-collapse "id=" Navbar-menu "> <ul class= "nav navbar-nav navbar-right" > <li class= "cative" ><a href= "#" >home</a></li&gt
        ; <li class= "cative" ><a href= "#" >About</a></li> <li class= "cative" ><a href= "#" >Portfolio</a></li> <li class= "cative "><a href=" # ">Contact</a></li> </ul> </div> </div> </nav> ; script src= ' http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js ' ></script> <script src= ' Http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js ' ></script>

Css:

*{
  margin:0;
  padding:0
}
. nav-title{
   font-family: ' Abril fatface ', cursive;
Navbar-header. Nav-title:hover,
navbar-header nav-title:focus{
  background: #fff;
  Color: #000;

cative{
  font-family: ' Comfortaa ', cursive;
Navbar-collapse Navbar-nav li A:hover,
. navbar-collapse. navbar-nav li a:focus{
  color: #000;
  Background: #fff;
}

Complete code Link: https://codepen.io/yinyoupoet/pen/eRPwXP?editors=1100