Insert a logo into the navbar

Insert a logo into the navbar
0.0 0

#1

Hello, guys!

1.) Can’t understand how to insert a logo into the navbar. I saw a code where logo was put into the container with

    tag, but still can’t understand how to do it with my code.

    2.) I also made my navbar-right, but can’t understand how to place my text in the middle of the navbar (so the margins from the top and bottom were the same.

    Here how it looks now: https://codepen.io/dmtrzz/pen/aybKPL

    Here is my code:
    HTML

<a href="#top"><img src="http://cdn1.savepice.ru/uploads/2017/7/28/3007d3456772333910400870b0530a18-full.png" title="Golfer"/></a>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="195">
  
  <ul class="nav navbar-nav navbar-right navbar-collapse navbar-collapse">
    <li><a class="scrollable" href="#top"><i class="fa fa-home"></i></a></li>
    <li><a class="scrollable" href="#aboutus">About Us</a></li>
    <li><a class="scrollable" href="#buy">BUY</a></li>
    <li id="right"><a href="#contacts">Contacts</a></li>
  </ul>
</nav>
</div>

CSS (in a little mess):

body {
background-color: rgb(230,230,230);
}
nav {
margin: 0%;
height: 80px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.navbar-default {
background-color: white;
border-color: white;
border-width: 0px;

}
li {
  font-family: "Copperplate Gothic Light", garamond;
  letter-spacing: 0px;
  font-weight: bold;
}
img{
  margin-left: auto;
  margin-right: auto;
  display: block;
  
}
#right {
  margin-right: 30px;
}
.affix {
  width: 100%;
  top: 0;
}
.bckgrnd{
  background-image: url(http://cdn1.savepice.ru/uploads/2017/7/27/4cc368954c746ebeab2ecfb9d7b309e2-full.jpg);
    border-left: 10px double white;
    border-top: 10px double white;
    border-right: 10px double white;
  border-bottom: 10px double white;
}
.img-responsive{
  width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;

}


#2

Hi dmtrzz,

1, make the logo element part of your list. It could be the first

  • element and then you can play around with its position.
    2, in your CSS code the nav element is set to height 80px.

    I hope this helps.