Insert a logo into the navbar


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:

    Here is my code:

<a href="#top"><img src="" 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>

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;
  margin-left: auto;
  margin-right: auto;
  display: block;
#right {
  margin-right: 30px;
.affix {
  width: 100%;
  top: 0;
  background-image: url(;
    border-left: 10px double white;
    border-top: 10px double white;
    border-right: 10px double white;
  border-bottom: 10px double white;
  width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;



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.