Twitter Bootstrap Question posted in

Cannot display logo in a navbar – Twitter bootstrap

so im coding up this pizza site and ive got a problem – i wanted to put the place’s logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here’s the code: 

/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body { 
  padding-top: 80px; 
}*/
body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}
.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}
.row {
  display: flex;
  justify-content: center;
 }
#logo {
  background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
  width: 431px;
  height: 146px;
  margin-left: 15px;
}
.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}
.nav-pills span, a {
  color: #F8B004;
}
.nav-pills span {
  font-size: 150%;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}
#logoFB {
  max-width: 100px;
}
#logoFB:hover{
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}
ul > li {
  margin-right: 50px;
}
h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}
#promocje {
  color: #F8B004;
  font-size: 1.5em;
}
h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Kontakt - Wzgórze Smaków</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="row">
  <a class="navbar-brand" href="index.html"><div id="logo"></div></a>
  <ul class="nav nav-pills">
    <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
    <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
    <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
  </ul>

    </div>
  </div>
</nav>


	<div class="container" id="glowna"> 
	<!-- glowna czesc -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

	<h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
	</div>

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

jsfiddle

Tags:

3

Answers


  1. 0

    I have just add my website logo and it’s working fine. Have a look

    /*#557c3e zielony*/


/*#F8B004 zloty*/


/*body { 
  padding-top: 80px; 
}*/

body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}

.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}

.row {
  display: flex;
  justify-content: center;
}

#logo {
  background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
  background-repeat:no-repeat;
  width: 431px;
  height: 146px;
  margin-left: 15px;
}

.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}

.nav-pills span,
a {
  color: #F8B004;
}

.nav-pills span {
  font-size: 150%;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}

#logoFB {
  max-width: 100px;
}

#logoFB:hover {
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}

ul > li {
  margin-right: 50px;
}

h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}

#promocje {
  color: #F8B004;
  font-size: 1.5em;
}

h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}
    <!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Kontakt - Wzgórze Smaków</title>
  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="row">
          <a class="navbar-brand" href="index.html">
            <div id="logo"></div>
          </a>
          <ul class="nav nav-pills">
            <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
            <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
            <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
            <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
            <li>
              <a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
            </li>
          </ul>

        </div>
      </div>
    </nav>


    <div class="container" id="glowna">
      <!-- glowna czesc -->
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
      width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

      <h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
    </div>

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

</html>
    Login or Signup to reply.
  2. 0

    Hi now you just define to margin-right:20px; in your li as like htis 

    .nav-pills>li+li {
    margin-right: 20px;
}

    /*#557c3e zielony*/
/*#F8B004 zloty*/
/*body { 
  padding-top: 80px; 
}*/
body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}
.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}
.row {
  display: flex;
  justify-content: center;
 }
#logo {
  background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
  width: 431px;
  height: 146px;
  margin-left: 15px;
}
.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}
.nav-pills span, a {
  color: #F8B004;
}
.nav-pills span {
  font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}
#logoFB {
  max-width: 100px;
}
#logoFB:hover{
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}
ul > li {
  margin-right: 50px;
}
h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}
#promocje {
  color: #F8B004;
  font-size: 1.5em;
}
h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Kontakt - Wzgórze Smaków</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="row">
  <a class="navbar-brand" href="index.html"><div id="logo"></div></a>
  <ul class="nav nav-pills">
    <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
    <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
    <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
  </ul>

    </div>
  </div>
</nav>


	<div class="container" id="glowna"> 
	<!-- glowna czesc -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

	<h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
	</div>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Please do refer the css code and also do check the image path is correct..

    #logo {
  background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
  background-repeat: no-repeat;
  width: 431px;
  height: 146px;
  margin-left: 15px;
  background-size: contain;
  background-position: center center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search