Home > database >  How can I Display A Navbar Logo?
How can I Display A Navbar Logo?

Time:07-02

After about 6 months of online courses, I am finally starting to build my app MVP. I am working on the layout, using Windows 10 and Meteor 2.7.3. I think I have most packages installed so far, like iron:router, jquery, twbs:bootstrap, accounts-ui and others...

I have tried my local C:/ drive path, multiple codes all over, including here on similar questions, but my logo will not appear at all!

I have also tried to use a logo template, and nested it into the header template. I have tried to access the logo from my Google Drive. Nothing shows up!

  • Logo Template (I have removed the template tags)

    <div >
      <img src="https://drive.google.com/file/d/11dNYA54BTlirUPA5Yy02kgUh1_kg-xlu/view"  width="55px" >
    </div>

  • Header Template (I have removed the template tags)

  <header>
    <head>

<html lang="en">

  <meta charset="utf-8"/>
  <title>MoAB Group</title>
  <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" />

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css" >

</html>
</head>
<nav >
        <div >
        
          <div >
          <a  href='/home'><!--{{> logo}}--><img src="https://drive.google.com/file/d/11dNYA54BTlirUPA5Yy02kgUh1_kg-xlu/view"  width="55px" ></a>
          </div>
        
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
        
        <div  id="navbarNavDropdown">
          <ul >
            <li >
              <a  href="/home">
                Home
              </a>
            </li>
            <li >
              <a  href="/about">About</a>
            </li>
            <li >
              <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Projects
              </a>
              <ul  aria-labelledby="navbarDropdownMenuLink">
                <li><a  href="/ideatoprod">Idea to Product</a></li>
                <li><a  href="/prototyping">Prototyping</a></li>
                <li><a  href="/mvppitch">MVP Pitch</a></li>
              </ul>
            </li>
          
          
            <li >
              <a  href="/funding">
                Funding
              </a>
            </li>
            <li >
              <a  href="/news">
                News
              </a>
            </li>
            <li >
              <a  href="/blog">
                Blog
              </a>
            </li>
            <li >
              <a  href="/admin">
                Admin
              </a>
            </li>
            <li >
              <a  href="/contact">Contact</a>
            </li>
          </ul>

          <div >
            <div >
              <button  type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Services
              </button>
              <ul  aria-labelledby="dropdownMenuButton">
                <li><a  href="#">Product Development</a></li>
                <li><a  href="#">Prototyping</a></li>
                <li><a  href="#">MVP Building</a></li>
              </ul>
            </div>
          </div>
        </div>

        <button type="button"  data-bs-toggle="modal" data-bs-                 target="#ModalForm">
          {{> loginButtons}}
        </button>
      </div>
      </nav>

CodePudding user response:

You will need eventually to run a webserver like apache or nginx to serve your website, even just for development on your own machine.

In this case, a relative path should work, say you put index.html and your image navbar-logo.png in the same directory, and just open index.html on your filesystem:

    <div >
      <img src="navbar-logo.png"  width="55px" >
   </div>

Alexander Nied is correct, google would prevent you from using drive to host web content.

  • Related