Click here to Skip to main content
14,926,168 members
Please Sign up or sign in to vote.
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>


head included cdn:-
HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900