The logo is missing from the navigation bar on my website, which is built

I am facing an issue while building my website - my logo is not appearing. I included a h1 tag within the same div, which shows up along with the logo beneath it. However, when I delete the h1 tag, the logo also disappears. Can anyone help me figure out why this is happening? You can see the demo here:

Thank you!

<div id="topbar">
  <div class="container">
    <div class="social-links">
      <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
    </div>
  </div>
</div>

<div class="container">

  <div class="logo float-left">
    <h1 class="text-light"><a href="#intro" class="scrollto"><span>Rapidsss</span></a></h1>
    <a href="#header" class="scrollto"><img src="img/logo.svg" alt="logo" class="img-fluid"></a>
  </div>

  <nav class="main-nav float-right d-none d-lg-block">
    <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#team">Team</a></li>
      <li><a href="#footer">Contact Us</a></li>
    </ul>
  </nav><!-- .main-nav -->

</div>

htmlcsstwitter-bootstrap

Answer №1

Your logo image is using SVG format, which is a vector image and does not have inherent height or width. To properly display it, you should specify either the desired height OR width in the IMG tag and let the browser determine the other dimension automatically.

Here's how you can do it:

HTML

<img src="img/logo.svg" alt="logo" class="img-fluid">

CSS

.img-fluid {
      width: 150px;
      height: auto; // This is the default setting, override only if necessary.
}

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

The glyphicons in Bootstrap are not appearing

My angular app is built using bulp angular and the component. I incorporate Sass (Node) into the project. I decided to switch to the flatly theme, which I downloaded from the bootswatch website and inserted it into _bootstrap.scss. // Core variables a ...

javascriptcssangularjstwitter-bootstrap-3sass

Is it possible to modify the concealed global attribute using CSS?

Imagine this scenario: <div hidden>blah blah blah</div> If I hide the <div> element like that, can CSS be used to make it visible again? Alternatively, is there an HTML-only method to hide a <div> that can later be reversed with ...

htmlcssshow-hide

website with a horizontal scroll-bar

Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...

htmlcss

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

Issues with Firefox's flexbox functionality are preventing it from working

Hey there, I've created a bubble menu with a button using code. It functions perfectly on Chrome but seems to have some issues on Mozilla Firefox. You can check it out and give it a try. $(".roundedBallOuter").click(function(e) { $(this).toggleCl ...

htmlcssfirefoxflexbox

Is there a way to stop "window.location.replace()" from being replaced or overridden?

Is there a method to safeguard against alterations or overrides of window.location.replace()? For instance, attempting to change it like this: window.location.replace = function(){ return "Hi" }. Initially, I experimented with using Object.free ...

javascripthtmlfunctionobject

Utilize jQuery Function on Identical Class of <ul> Elements

I have integrated a listview control in my ASPX page. The data is being fetched from the database and displayed in the listview. I have also utilized jQuery script to implement the .fadein() and .fadeout() effects on the listview elements. However, when I ...

javascriptjqueryasp.netcss

Steps to reveal a hidden div when clicking on another div using CSS exclusively

Is it possible to reveal a hidden div when another div is clicked using only CSS? Below is the HTML code: <div id="contentmenu"> <div class="show"> <a class="show"> My Student ...

htmlcss

Creating a Transparent Scrollbar in React for Google Chrome

::-webkit-scrollbar { width: 0.5vw; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(99, 99, 99); border-radius: 10px; } I wrote this code to style a scrollbar in CSS. The scrollba ...

htmlcssreactjsgoogle-chromescrollbar

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

javascripthtmlcssiossafari

I am looking to organize my content by creating categories such as How, When, and Why for different videos. How can I achieve this for a large amount of text

I am in the process of organizing categories for the text I have. My goal is to display text from specific categories based on the color that a random video lands on. For example, if the video lands on the color red, I want text from the category labeled " ...

javascripthtmlcssarrays

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

javascripthtmlcssdrag-and-dropdraggable

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

javascripthtmlangularjsseoaudit

Tips for assigning an AngularJS value to jQuery

Displaying a value in a view using {{ myvalue }}. Assigning the value from the controller as $scope.myvalue = "123"; Attempting to send this value myvalue to an ajax call. Need to assign angularjs value to jquery value. How can I accomplish assigning t ...

javascriptphpjqueryhtmlangularjs

Creating the necessary user interface using JSON data.Here are some steps to follow

I am struggling to create a dynamic UI based on JSON data. The issue I'm facing is with looping through the data to generate the required elements. My Goal: Achieving a Dynamic UI from Static Code .switch { position: relative; display: inline- ...

javascriptjqueryhtmlcss

How to locate a particular element containing specific text using xpath

I have a unique set of spans to work with: <span> <span>foobar</span> <span>textexampleone</span> </span> Currently, I am attempting to utilize xpath in order to locate the span containing "textexampleone" with ...

htmlxmlxpathselenium

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

htmlcsshtml-tablescrollable

Creating custom styles with makeStyles in Material UI

How can I properly write the following CSS value as a string in a makeStyles function within Material UI? background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(../assets/pexels-pixabay-41949.jpg), I attempted to do it this way but i ...

cssreactjsmaterial-uilinear-gradientsmakestyles

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss