Bootstrap 4 dropdown menu drops inside navbar

Question

0.00/5 (No votes)

See more:

hi, I'm working on a responsive web page so I decided to go with bootstrap so currently, I faced a problem with the [ Navbar Dropdown menu ] the problem is only on the mobile device (smartphones) the dropdown menu should drop outside the navbar but instead is dropping inside the navbar which making it expand and look higher I took a screenshot to explain more:-
ScreenShot

also, I another problem with the collapse button it doesn't work at all any help?
I posted all the code even the CDN part I hope I can find help

What I have tried:

Navbar Section Within Body Tag:-

PHP

<body style="direction: rtl;  margin:0; padding:0;  background-color:#D55E2D;">
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- Image and text -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="z-index:1 !important;direction:rtl">
  <?php 
    if($loggedin == false){ 
      echo'<a class="navbar-brand" href="#"><img src="../styles/images/svgtopng.png" alt="" width="65" height="" class="d-inline-block align-top mr-auto"><span style="font-family: hana;">المتجر المتعدد</span></a>';}elseif($loggedin==true && isMobile()){
      echo'<ul class=" navbar-nav">
      <li class="nav-item dropdown">
        <a href="#" class="nav-link" style="display:inline-block; font-family:cocon-next-arabic; font-size:28px; color:white;">'.$name.'</a>
        <img style="display:inline-block; width:85px; height:80px; border: 2px solid white; border-radius: 25px;" src="../Styles/images/skypes.jpg"  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"/>
        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
          <li><a class="dropdown-item" href="#" style="font-family: cocon-next-arabic; font-size:26px; color:black;">السلة   </a></li>
        </ul>
      </li>
    </ul>';}?>
      
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
    
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto" style="direction:ltr; padding-right:40px">
      <?php if($loggedin = false){echo'<li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
          <a class="nav-link active pull-right" aria-current="page" style="direction: rtl; background-color:green;" href="auth/register.php">إنشاء حساب</a>
        </li> 
        <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
          <a class="nav-link active pull-right" aria-current="page" style="direction: rtl; background-color:orangered;" href="auth/login.php">تسجيل دخول</a>
        </li>';}?>
        <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
            <a class="nav-link active" aria-current="page" style="direction: rtl;" href="store.php">المتجر<img src="../Styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
          </li>
      <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
            <a class="nav-link active" aria-current="page" style="direction: rtl;" href="index.php">الرئيسية<img src="../Styles/images/home.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
          </li>
      </ul>
      <ul class="mr-auto navbar-nav">
        <li class="nav-item dropdown">
          <a href="#" class="nav-link" style="display:inline-block; font-family:cocon-next-arabic; font-size:28px; color:white;">علي الزرقاني</a>
          <img style="display:inline-block; width:85px; height:80px; border: 2px solid white; border-radius: 25px;" src="../Styles/images/skypes.jpg"  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"/>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#" style="font-family: cocon-next-arabic; font-size:26px; color:black;">السلة   ^__i class="fa fa-shopping-cart fa-lg"></a></li>
            <li><a class="dropdown-item" href="#" style="font-family: cocon-next-arabic; font-size:26px; color:black;">الإعدادت   ^__i class="fa fa-cog fa-lg"></a></li>
            <li><a class="dropdown-item" href="#" style="font-family: cocon-next-arabic; font-size:26px; color:black;">مكاني   ^__i class="fa fa-map-marker fa-lg"></a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>

Bootstrap 4 dropdown menu drops inside navbar

Add your solution here

Preview 0

Bootstrap 4 dropdown menu drops inside navbar

Add your solution here

Preview 0

Existing Members

...or Join us