Expected behavior

Actual behavior

Resources (screenshots, code snippets, etc.) here I am sharing the full HTML code with internal CSS & internal JavaScript added script. please help me...

testing /* Internal CSS */ @media (min-width: 1400px) { main, header, #main-navbar { padding-left: 240px; } }

<ul class="sidenav-menu px-2">
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-area fa-fw me-3"></i
        ><span>Website traffic</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-pie fa-fw me-3"></i><span>Sales</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-line fa-fw me-3"></i
        ><span>Subscriptions</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link"
       ><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a
      >
    <ul class="sidenav-collapse">
      <li class="sidenav-item">
        <a class="sidenav-link">Profile</a>
      </li>
      <li class="sidenav-item">
        <a class="sidenav-link">Account</a>
      </li>
    </ul>
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link"
       ><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a
      >
    <ul class="sidenav-collapse">
      <li class="sidenav-item">
        <a class="sidenav-link">Request password</a>
      </li>
      <li class="sidenav-item">
        <a class="sidenav-link">Reset password</a>
      </li>
    </ul>
  </li>
</ul>

  <!-- Search form -->
  <form class="d-none d-md-flex input-group w-auto my-auto">
    <input
           autocomplete="off"
           type="search"
           class="form-control rounded"
           placeholder='Search (ctrl + "/" to focus)'
           style="min-width: 225px"
           />
    <span class="input-group-text border-0"
          ><i class="fas fa-search"></i
      ></span>
  </form>

  <!-- Right links -->
  <ul class="navbar-nav ms-auto d-flex flex-row">
    <!-- Notification dropdown -->
    <li class="nav-item dropdown">
      <a
         class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
         href="#"
         id="navbarDropdownMenuLink"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <i class="fas fa-bell"></i>
        <span class="badge rounded-pill badge-notification bg-danger"
              >1</span
          >
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuLink"
          >
        <li><a class="dropdown-item" href="#">Some news</a></li>
        <li><a class="dropdown-item" href="#">Another news</a></li>
        <li>
          <a class="dropdown-item" href="#">Something else here</a>
        </li>
      </ul>
    </li>

    <!-- Icon dropdown -->
    <li class="nav-item dropdown">
      <a
         class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
         href="#"
         id="navbarDropdown"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <i class="flag-united-kingdom flag m-0"></i>
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdown"
          >
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-united-kingdom flag"></i>English
            <i class="fa fa-check text-success ms-2"></i
              ></a>
        </li>
        <li><hr class="dropdown-divider" /></li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-poland flag"></i>Polski</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-china flag"></i>中文</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-japan flag"></i>日本語</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-germany flag"></i>Deutsch</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-france flag"></i>Français</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-spain flag"></i>Español</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-russia flag"></i>Русский</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-portugal flag"></i>Português</a
            >
        </li>
      </ul>
    </li>

    <!-- Avatar -->
    <li class="nav-item dropdown">
      <a
         class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
         href="#"
         id="navbarDropdownMenuLink"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <img
             src="https://mdbootstrap.com/img/new/avatars/2.jpg"
             class="rounded-circle"
             height="22"
             alt="Avatar"
             loading="lazy"
             />
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuLink"
          >
        <li><a class="dropdown-item" href="#">My profile</a></li>
        <li><a class="dropdown-item" href="#">Settings</a></li>
        <li><a class="dropdown-item" href="#">Logout</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- Container wrapper -->

https://mdbootstrap.com/img/new/textures/full/56.jpg'); height: 300px; z-index: -1; "

<div class="pb-2" style="background-color: hsl(0, 0%, 98%)">
  <div class="container">
    <div class="row d-flex justify-content-center align-items-center">
      <div class="col-lg-6 col-md-8 mb-4 mb-md-0 pt-4">
        <img
             src="https://mdbootstrap.com/img/new/avatars/18.jpg"
             class="rounded-circle float-none float-md-start me-4 mb-3"
             alt=""
             style="
                    width: 168px;
                    margin-top: -110px;
                    border: 4px solid hsl(0, 0%, 98%);
                    "
             />
        <h1 class="fw-bold">Anna Doe</h1>
        <p class="text-muted">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet assumenda, commodi perferendis libero debitis harum ut
          sed nostrum minima aspernatur. .
        </p>
      </div>

      <div class="col-lg-6 col-md-4 mb-4 mb-md-0 text-center text-lg-end">
        <button type="button" class="btn btn-primary btn-rounded" data-mdb-ripple-init>
          Edit profile
        </button>
      </div>
    </div>
  </div>
</div>

// Internal JS const sidenav = document.getElementById("sidenav-1"); const sidenavInstance = mdb.Sidenav.getInstance(sidenav);

let innerWidth = null;

const setMode = (e) => { // Check necessary for Android devices if (window.innerWidth === innerWidth) { return; }

innerWidth = window.innerWidth;

if (window.innerWidth < 1400) { sidenavInstance.changeMode("over"); sidenavInstance.hide(); } else { sidenavInstance.changeMode("side"); sidenavInstance.show(); } };

setMode();

// Event listeners window.addEventListener("resize", setMode);