Dropdown always expanded

Bootstrap Studio Help
1

Dropdown always expanded

I have a dropdown in the navbar and it works fine with Windows10 and Chrome.
But with my mobile phone and Android the problem comes when the Hamburger icon is clicked:
The dropdown is always expanded and also cannot collapse. That is rather annoying as the other items of the menu cannot be seen. They are covered by the dropdown-items.

The following code has been taken from the html-file. It has been reduced a bit to present it more clearly:

<div class="collapse navbar-collapse" id="navcol-1">
       <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="start.html">Home</a></li>
            <li class="nav-item dropdown">
                 <a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Videos2&nbsp;</a>*
                        <div class="dropdown-menu"><a class="dropdown-item" href="https://youtu.be/...">2020 Fuchsjagd ...</a></div>*
                       <!--*
                                   19 more drop down-items to follow  
		              -->	
             </li>
              <li class="nav-item"><a class="nav-link" href="ferieninfo.htm">Ferieninfos </a></li>
              <!--
                    6 more nav-items to follow
	           -->  
          </ul>
   </div>

It has to be mentioned that
div class=”dropdown-menu”
does not contain the show class and aria-expanded is set to false in the 5th line of the code above.

What could be the reason for that behaviour?
I am using Bootstrap Studio 5.4.3.

2

Sorry, I added html code and expected that this could be read like normal text, but it did not work. How would I format the lines as readable program code/text?

3

Use the Code button at the top of the edit window. Looks like </>

4

Thank you, jo1 ! I modified it.

5

Is the dropdown deactivated when you publish or export ? If you activated it to edit it or anything inside the tag and forgot to deactive it, then it will stay in the activated state.

Look at the menu bar for the dropdown…?

6

It might be easier to help you if you posted the link to your website, rather than the chunk of code.

7

For some reason it is ok. on a Huawey mobile phone with Android version 6.0. and Chrome browser

So yes, the dropdown was deactivated when the project was exported.

The problem still exists with a Samsung Galaxy A7 (2018) and Android version 10.0 (security patch, Sept. 1st, 2020).

The Samsung mobile phone has 2 browsers.

  • No problem when Samsung’s browser is used.

  • When using the Chrome browser (version 86.0.4240.198) the ‘Videos’ dropdown is always expanded.

My first idea was to reload the page, but that did not help.

The link to my web site is this: https://reitenmv.de

(index.html is a sort of a ‘switch point’ and for devices with view port widths < 577 it jumps to index_mobile.php and from there to start.html)

To go to the home page for mobile phones directly reitenmv.de/start.html can be entered.
For me it looks like an incompatibility with that version of Chrome. But I am not sure.

Any ideas?

8

That’s a lot of switching around and redoing of the same page in different size versions in this day of mobile first web building. Might want to think about doing a new site or at least doing a responsive one that is truly responsive. Shouldn’t need to change to different pages for different sizes. Today’s coding setups allow for adjustments to the same page for that now. Much simpler and less work involved.

1 Like
9

If you go to this test site for the nav clean does it still happen on the devices in question ?

10

No it does not. The dropdown is not expanded.

11

@jo-r

I agree with you that index_desktop.htm is not responsive. Its a residue that some people don’t want to miss, so it’s a compromise (not a good one). I appreciate your other suggestions and will take them into consideration. Thank you.

12

The navclean I provided is the same structure and using the same bootstrap css and js so I would not think it would be a compatibility issue rather a confilict or lack of resources being applied correctly.

It would be interesting to find out if the “show” class is being added or not by viewing the html source code on the actual mobile devices in question.

The other possibility although less likely would be that some other css is changing the “height” as this is basically what the collapse class does…reduce height to 0.

13

It would be interesting indeed, but I am afraid it is too late to check that.
I went to that site again (with Chrome and Samsung Galaxx A7 (2018)) and – to my surprise – the error was gone.
Ok, I had reloaded the page, but that is something I had done several times before without improving the situation. Perhaps the browser cache was the trouble maker and it is cleared automatically after some time? No idea. However, I did not clear the cache before.

14

Unfortunately for us, that’s many times the issue for both us as we develop the sites, and to our users (especially those not so savvy to computers ones)

15

Thanks to both of you for your comments. I hope the issue is gone forever.

16

Bootstrap Studio does have a setting on export that might help. I use it when I export.

Export Settings
Version Assets (turn on)

“Append content hashes to all asset Urls for cache busting”

17

I have activated this setting now. Thank you for this interesting hint!