Solution 1 :

display:inline is causing this… use display:contents to resolve

nav {
  background-color: #229a44;
}

a.navbar-brand {
  display: contents;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

<nav class="navbar navbar-expand-lg navbar-dark custom-bg-primary text-white fixed-top mb-3 py-2">
  <div class="container">
    <a class="navbar-brand" href="{% url 'job-list' %}">
      <img src="https://i.stack.imgur.com/Jqd4Z.png" alt="Sirf Sarkari Naukri" height="25%" width="25%">
      <!--
    <img src="https://www.akberiqbal.com/favicon.ico" alt="Sirf Sarkari Naukri" height="25%" width="25%">
    -->

    </a>
    <!-- <a class="navbar-brand" href="{% url 'job-list' %}">Sirf Sarkari Naukri</a> -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-thumbs-up"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SARKARI JOBS</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">BY COMPANY</a>
            <hr />
            <a class="dropdown-item" href="#">BY QUALIFICATION</a>
            <a class="dropdown-item" href="#">BY PROFESSION</a>
            <hr />
            <a class="dropdown-item" href="#">BY STATE</a>
            <a class="dropdown-item" href="#">BY TOP CITIES</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Problem :

Below is the code for my Navbar:

<nav class="navbar navbar-expand-lg navbar-dark custom-bg-primary text-white fixed-top mb-3 py-2">
  <div class="container">
    <a class="navbar-brand" href="{% url 'job-list' %}"><img src="{% static 'jobs/images/sirf-sarkari-naukri.png' %}" alt="Sirf Sarkari Naukri" height="25%" width="25%"></a>
    <!-- <a class="navbar-brand" href="{% url 'job-list' %}">Sirf Sarkari Naukri</a> -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SARKARI JOBS</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">BY COMPANY</a>
            <hr />
            <a class="dropdown-item" href="#">BY QUALIFICATION</a>
            <a class="dropdown-item" href="#">BY PROFESSION</a>
            <hr />
            <a class="dropdown-item" href="#">BY STATE</a>
            <a class="dropdown-item" href="#">BY TOP CITIES</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

After I added logo to my Navbar, on small screen the Navbar Toggler button is getting shifted to new line and overlapping on the search bar.

Could anyone please help me fix this issue, thanks in advance!

enter image description here

Comments

Comment posted by xpetta

Thank you so much @Akber Iqbal, may Allah (SWT) bless you! I would also like to know, is there a way I can change the menu icon (burger icon).

Comment posted by Akber Iqbal

Jazak Allah bro… check a different (font-awesome) icon in the attached snippet above

Comment posted by xpetta

You’re just brilliant! Once again Jazak Allah Bro!

By