Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet:

/*#557c3e green*/
/*#F8B004 gold*/
/*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>Contact - Flavor Hill</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="specials.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Specials</a></li>
    <li role="presentation" class="active"><a href="contact.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Contact</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Call! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/flavorhill/?fref=ts"><img src="flavorHillMarcin/facebook.png" id="logoFB"></a></li>
  </ul>

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


<div class="container" id="main"> 
<!-- main section -->
<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>WELCOME!</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

htmlcsstwitter-bootstrap

Answer №1

To add a margin-right of 20px to your li, use the following CSS:

.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>

Answer №2

Make sure to reference the css code and verify that the image path is accurate.

#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;
}

Answer №3

I have successfully incorporated my website logo and it is now functioning perfectly. Take a look

/*#557c3e green*/


/*#F8B004 gold*/


/*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>Contact - Hill of Flavors</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="promotions.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promotions</a></li>
            <li role="presentation" class="active"><a href="contact.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Contact</a></li>
            <li><a href="tel:691 671 702"><span id="nrTel">Call! <div>691 671 702</div></span></a></li>
            <li>
              <a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="hillOfFlavorsMarcin/facebook.png" id="logoFB"></a>
            </li>
          </ul>

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


    <div class="container" id="main">
      <!-- main section -->
      <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!1pl!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>WELCOME!</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you please explain what shape-id denotes and provide guidance on locating it within a CSS file?

I have a question that may seem trivial to experienced web developers - what exactly is "shape-id"? For example, in the code <hr shape-id="2">. I'm currently attempting to change the color of the horizontal lines (hr) on my website, but I can& ...

htmlcss

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

Having trouble getting the items to show up on the canvas

I have been struggling to implement JavaScript on a canvas in order to display mice in the holes using the mouse coordinates. Despite trying many different methods and spending close to a month on this project, I still can't seem to get it to work acr ...

javascripthtmlcanvas

Expanding the row beyond the container to match the width of the viewport

Can Bootstrap 5 be used to extend a row outside a container without causing a horizontal scrollbar? After researching the questions related to this topic, it seems that pseudo-elements are commonly used. However, when attempting to use a pseudo-element, a ...

csstwitter-bootstrapbootstrap-5

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

I just need the text to be made clickable instead of the entire list item block. <a class="menu_head">Hello</a> <ul class="menu_body"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2 ...

htmlcss

Adhering to a modular approach to design

I am facing an issue with two modules: One is the .master-header and the other is the .header-nav The .header-nav is contained within the .master-header and consists of a simple navigation menu: <nav class="header-nav"> <ul> ...

cssmodulebem

Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

Currently, the tooltip I have is functioning properly: However, my main requirement is to align it to the right. So, when I use .pull-right, it appears like this: This is the HTML code snippet: <div class="wrapper">Login <span rel= ...

jqueryhtmlcsstwitter-bootstrap

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others. https://i.sstatic.net/IGN7K.png I aim to vertically align all button ...

htmlcsstwitter-bootstrapbootstrap-4

What is the reason for Internet Explorer making a POST request upon clicking <a><button/></a>?

Here's the structure of my form: <form method="post"> {% csrf_token %} <table> {% for field in form %} {% partial "partials/field.html" field=field %} {% endfor %} <tr> <td& ...

htmlinternet-explorerhttp

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

javascriptcssbuttononclickclick

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Add a symbol at the end of the input that signifies its value

I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value. The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: ...

htmlcssreactjs

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

javascriptjqueryhtmlcss

The necessary attribute is malfunctioning. (HTML)

I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...

javascripthtmlattributes

Displaying dynamic content in JavaScript using Galleria module

Hello and thank you for taking the time to check out my question. I've encountered a little issue that I can't seem to solve by myself. I'm hoping someone could lend me a hand. On my website, there is a dynamic field filled with a code from ...

javascriptphpjqueryhtmlgalleria

Turning multiple .html files into a single csv using beautifulsoup

I am dealing with a situation where I have 13,000 html files stored in a folder and my goal is to consolidate all the data into a single csv file. Although I believe I have made progress in extracting the data, I am encountering challenges when it comes t ...

pythonhtmlcsvbeautifulsoup

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

Turning a string retrieved from the element's data attribute into a JSON format

I am running into an issue with the code snippet below. It seems that $.parseJSON() is having trouble with single and double quotes. I'm stuck on finding a solution to this problem. Any help would be greatly appreciated! <div data-x='{"a":"1" ...

javascriptjqueryhtmljson