Dreamweaver CC - bootstrap navbar help

[jttiglao]

Soo I just got done being told that my website scaling is crap and it needed change. So i decided to restart entirely, but keep the html code from the previous design to help make the renovations easier.

 

So I have this navigation bar, pretty basic.

 

This is what I want it to look like:

 

 

 

HTML CODE:

<nav>
    <p><a href="index.html" class="homenav">HOME</a> 
      <a href="#aboutum" class="aboutnav">ABOUT</a> 
      <a href="#portfolio" class="portfolionav">PORTFOLIO</a>
      <a href="#contact" class="contactnav"> CONTACT </a>
      <a href="#contact" class="clientalbumnav">CLIENT ALBUMS </a>
      <a href="#bookonline" class="bookonline">BOOK ONLINE</a></p>
</nav>

 

CSS CODE:

.aboutnav {
    text-decoration: none;
    color: #000000;
    margin-top: 0%;
    margin-left: 0%;
    border: medium solid #FFFFFF;
    padding-top: 5px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 5px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.aboutnav:hover {
    border-color: #000000;
}
.homenav {
    color: #000000;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border: medium solid #FFFFFF;
    padding-top: 5px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-left: 50px;
}
.homenav:hover {
    border-color: #000000;
}
.clientalbumnav {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    color: #000000;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-style: solid;
    border-color: #FFFFFF;
}
.portfolionav {
    padding-top: 5px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 5px;
    border-style: solid;
    border-color: #FFFFFF;
    text-decoration: none;
    color: #000000;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.contactnav {
    color: #000000;
    text-decoration: none;
    border-style: solid;
    padding-top: 5px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 5px;
    border-color: #FFFFFF;
    margin-right: 2px;
    margin-left: 2px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.bookonline {
    padding-left: 40px;
    padding-right: 40px;
    text-decoration: none;
    color: #000000;
    margin-left: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 2px;
    border-style: solid;
    border-color: #FFFFFF;
}
.portfolionav:hover {
    border-color: #000000;
}
.contactnav:hover {
    border-color: #000000;
}
.clientalbumnav:hover {
    border-color: #000000;
}
.bookonline {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.bookonline:hover {
    border-color: #000000;

 

 

 

So--- do I do the same thing as I did before? Is there anything else I need to do??

 

So this is what I want it to look like on a desktop.

When it's below or equal to 649 pixels, I want to have the logo in the beginning, and then a drop down menu with all of my navigation.

Howw???