Click here to Skip to main content
15,878,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a navbar with this code:
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand px-5" href="index.php">
          <img src="img/logo.png" width="110" height="70">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item px-4">
              <a class="nav-link active text-white" href="index.php">Home</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="" id="navbarDropdown1" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">Categories</a>
                <ul class="dropdown-menu">

                  <?php
                  $sql1 = $db->prepare("SELECT * FROM categories WHERE id IN (SELECT parent FROM categories) AND parent = ? AND deleted = ?");
                  $sql1->bind_param('ii', $var0, $var0);
                  $sql1->execute();
                  $result1 = $sql1->get_result();
                  while($row1 = mysqli_fetch_assoc($result1)){
                    $test = $row1['id'];
                    ?>

                    <li class="nav-item dropend">
                    <a class="nav-link active dropdown-toggle" href="" id="navbarDropdown1" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false"><?=$row1['category'];?></a>
                    <ul class="dropdown-menu">

                      <?php
                      $sql2 = $db->prepare("SELECT * FROM categories WHERE parent IN (SELECT id FROM categories) AND parent = ? AND deleted = ?");
                      $sql2->bind_param('ii', $row1['id'], $var0);
                      $sql2->execute();
                      $result2 = $sql2->get_result();
                      while($row2 = mysqli_fetch_assoc($result2)){ ?>

                    <li><a class="dropdown-item" href="category.php?cat=<?=$row2['id'];?>"><?=$row2['category'];?></a></li>

                  <?php } ?>

                  </ul>

                  <?php }
                       $sql3 = $db->prepare("SELECT * FROM categories WHERE id NOT IN (SELECT parent FROM categories) AND parent = ? AND deleted = ?");
                       $sql3->bind_param('ii', $var0, $var0);
                       $sql3->execute();
                       $result3 = $sql3->get_result();
                       while($row3 = mysqli_fetch_assoc($result3)){ ?>

                          <li><a class="nav-link active" href="category.php?cat=<?=$row3['id'];?>"><?=$row3['category'];?></a></li>

                        <?php } ?>

                </ul>
            </li>
          </li>
            <li class="nav-item px-4">
              <a class="nav-link active text-white" href="about.php">About</a>
            </li>
        </ul>
    </div>
    </div>
</nav>

<script>
    document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
        if (window.innerWidth > 992) {
            document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
                everyitem.addEventListener('mouseover', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.add('show');
                        nextEl.classList.add('show');
                    }
                });
                everyitem.addEventListener('mouseleave', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.remove('show');
                        nextEl.classList.remove('show');
                    }
                })
            });
        }
// end if innerWidth
    });
    // DOMContentLoaded  end
</script>

and this css file:
CSS
.dropdown:hover > .dropdown-menu, .dropend:hover > .dropdown-menu{
  position: block;
  margin-top: .125em;
  margin-left: .125em;
}

@media screen and (min-width:769px){
  .dropend:hover > .dropdown-menu{
    position: absolute;
    top: 0;
    left: 100%;
  }
}

Now the weird problem is when I open the website on mobile on 400x652 dimension the menu dropdown doesn't work at all. And if it is on 500x589 dimension the menu dropdown works but the submenu dropdown doesn't work, it closes the menu dropdown instead. Where is the issue, and how to fix it?

What I have tried:

I tried to remove all css but still the problem exist.
Posted
Updated 22-May-23 1:43am
Comments
Member 15627495 22-May-23 1:51am    
as comment about your multiple queries :
after the 'echo' you can destroy the vars with :
unset($sql1) ;
unset($sql2) ;
unset($sql3) ;

unset($result1) ;
unset($result2) ;
unset($result3) ;
// unset($var) ; it free the memory , it belong to 'best practices'.
// when you have a big bunch of Datas, or concrete weight, it's useful.
// you can apply unset() on all objects too : on $sql'N' , and on '$result'N''


another things: I understand your 3 queries, but by going deep, you need one only query to achieve, the step you miss is to filter the result, to get the row you need only.
try to enhance you $result1 use. I'm convinced you just need 'one Db call' with a single query like :
"select * from categories"
// as a main query, all others fields to get could be filter with 'if(!empty($rows['parent'])){ echo ... ;}


By your code, and through 3 loops, you are always coding for 'big big result'. your code is design as 'big consumer' , and 'low' this way.
It's common as a 'code design error'. I'm sure you will improve that easy.
FRS4002 22-May-23 1:58am    
Ok thanks, but what about my main question?
Member 15627495 22-May-23 2:09am    
your 'small display' miss parameters,
when using screen size,
keep in mind you are creating basically 2 displays with different CSS settings.
all elements which needs new parameters ( for 'small display' ) have to be written.

It's like having two files CSS. one for the 'big', aside one for the 'small'.
Media queries are like a 'reset' ( or overwrite ) of few elements, you have to specify all tags which require adaptative display.
FRS4002 22-May-23 2:15am    
Ok, could you please give me at least a temporary fix for the issue corresponding to my code above?
Member 15627495 22-May-23 2:25am    
responsive css :
they need :

- one Main css part ( with all parameters persistents ). no update in this part.

- and the media queries ( big / casual / mobile / small ) to get the responsive display. ( in all those parts, you'll write the parameters which need to be overwritten when Display change ).

1 solution

From your css file, a few changes that is needed, I did not test but this should work -

/* For screen sizes up to 768px */
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  position: block;
  margin-top: .125em;
  margin-left: .125em;
}

/* For smartphones */
@media screen and (max-width: 768px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 100%; /* Position the submenu below the parent menu */
    left: 0; /* Position the submenu on the left side of the parent menu */
    width: 100%; /* Make the submenu full-width */
  }
}


I have changed max-width instead of min-width, the position property is set to absolute to position the submenu, top is set to 100% to place it below the parent menu, left is set to 0 to align it to the left side of the parent menu, and width is set to 100% to make the submenu take the full width of the screen.
 
Share this answer
 

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