Bootstrap submenu doesn't work well on mobile

Question

0.00/5 (No votes)

See more:

, +

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 21-May-23 19:17pm

FRS4002

Updated 22-May-23 1:43am

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Answer 1 · 2023-05-22T01:43:00

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.