Problem with navigation bar on Bootstrap 4-CodePudding

I need help solving a problem. I want to make it so that the logo is on the left side of the top navigation bar, but every attempt to implement this breaks the frontend.

The code itself:

.top-line {
    border-bottom: 1px solid #cecece;
}

.top-line li {
    margin-top: 15px;
    margin-bottom: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <!-- CSS Bootstrap 4.5.2 -->

    <header>
        <nav >

          <!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->
          <div >
            <button  type="button" data-toggle="collapse" data-target="#navbar"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span ></span>
            </button>
          </div>

          <div  id="navbar">
            <ul >
              <img  src="https://svgshare.com/i/hqG.svg" alt="">
              <li >
                <a  href="#">Home <span >(current)</span></a>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
            </ul>

            <ul >
              <li >
                <a  href="#">Home <span >(current)</span></a>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
    </header>

Please tell me how can I do it right? Thanks in advance for any help! I'm still learning and any help will go to good.

This post has been completely changed, for a different task. The comments below are not relevant.

CodePudding user response：

Just change below code with your navbar code.

<nav >
  
        <a  href="#">
  
            <!-- Add logo with size of 90*80 -->
            <img src="https://svgshare.com/i/hqG.svg"  alt="">
        </a>

              </div>

Or replace the whole modified code in with your existing code

.top-line {
    border-bottom: 1px solid #cecece;
}

.top-line li {
    margin-top: 15px;
    margin-bottom: 15px;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <!-- CSS Bootstrap 4.5.2 -->

    <header>
        <nav >
  
    <a  href="#">
  
        <!-- Add logo with size of 90*80 -->
        <img src="https://svgshare.com/i/hqG.svg"  alt="">
    </a>

          </div>

          <div  >
            <ul >
             
              <li >
                <a  href="#">Home <span >(current)</span></a>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
            </ul>

            <ul >
              <li >
                <a  href="#">Home <span >(current)</span></a>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
              <li >
                <a  href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                  <a  href="#">Action</a>
                  <a  href="#">Another action</a>
                  <a  href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
    </header>