Bootstrap 3.2下拉菜单切换在iPhone上不起作用

Question

I have the below menu which I use Bootstrap 3.2. The menu + toggle button works great on any browsers on Android but iOS.

I can click on the button then the menu will show up & hide right away after showing.

I used a lot of work-around & fix, disable touchstart in bootstrap.js or changing z-index of navbar. . . but it won't help me anyway with this problem.

The menu seems to show up after click the toggle button but I can't see anything. I have to touch the toggle button again as closing the menu & touch again to open the menu again.

You guy can have a check if you have iPhone at www.vietwash.vn

Thank you for your concern about my problem.

<nav class="navbar navbar-default col-xs-12 col-sm-12 col-lg-12"
                    role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">Toggle navigation</span> <span
                                class="icon-bar"></span> <span class="icon-bar"></span> <span
                                class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"> <jdoc:include type="modules"  name="top-logo" style="xhtml" />
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">

                            <li id="home" class="active"><a href="<?php JUri::base();?>">Trang
                                    chủ</a></li>

                            <li id="intro" class="dropdown"><a href="#"
                                class="dropdown-toggle" data-toggle="dropdown"> Giới thiệu <b
                                    class="caret"></b>
                            </a>
                                <ul class="dropdown-menu">
                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=1"?>">Về
                                            chúng tôi</a></li>

                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=2"?>">Công
                                            nghệ Vietwash</a></li>

                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=6"?>">Trải
                                            nghiệm phòng chờ</a></li>
                                </ul></li>
                            <li id="service"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=featured&Itemid=106"?>">Dịch
                                    vụ</a></li>
                            <li id="news"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=category&layout=blog&id=9&Itemid=105"?>">Tin
                                    tức</a></li>
                            <li id="contact"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=featured&Itemid=107"?>">Liên
                                    hệ</a></li>

                        </ul>
                    </div>
                </nav>

Answer 1

I guess there is a problem in your CSS. Take a look at line 188 in your responsive.css . There's @media only screen and (max-width: 480px) and (min-with: 321px) .

Try to remove:

position: absolute
top: 50px

Or replace it to position: static .

Additional remarks

• You're using col-xs-12 col-sm-12 col-lg-12 - rather use container-fluid
• When you use col-lg-8 bootstrap makes it full-width for elements smaller than screen-lg-min . So col-xs-12 col-sm-12 are obsolete.
• You have some problem in footer. Because of improper structure: .container > .row > .container again.

Cheers mate! I hope it helps.