Topic: drawer appears strange on Chrome, please help

wuyukewu free asked 7 years ago


Can anyone please help: The link of drop town menu (drawer) on the nav appears as a wrapped box on Chrome of PC, but appears normal on IE and Firefox. Can you please help and let me know the best solution? Thank you very much.

@jpacanowski, did you try my code?

free answered 7 years ago


I've got the same problem, Sir.


Check this code:
<!--Navbar-->
<nav class="navbar navbar-dark light-blue darken-3">

    <!-- Collapse button-->
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
        <i class="fa fa-bars"></i>
    </button>

    <div class="container">

        <!--Collapse content-->
        <div class="collapse navbar-toggleable-xs" id="collapseEx2">
            <!--Links-->
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link">About VAERS <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item btn-group">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Report an Adverse Eveent</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">VAERS Data</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="nav-link dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Resources</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu3">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item">Another action</a>
                        <a class="dropdown-item">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Submit Follow-Up Information</a>
                </li>
            </ul>
        </div>
        <!--/.Collapse content-->

    </div>

</nav>
<!--/.Navbar-->

wuyukewu free answered 7 years ago


Thank you, please see below: It's the basic nav and I copied from the site: <!--Navbar--> <nav class="navbar navbar-dark light-blue darken-3"> <!--navbar-fixed-top for keeping nav bar on top always--> <!-- Collapse button--> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2"> <i class="fa fa-bars"></i> </button> <div class="container"> <!--Collapse content--> <div class="collapse navbar-toggleable-xs" id="collapseEx2"> <!--Navbar Brand--> <!--Links--> <ul class="nav navbar-nav"> <li class="nav-item active"> About VAERS <li class="nav-item"> | <li class="nav-item dropdown"> Report an Adverse Eveent <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> Action Another action Something else here </div> <li class="nav-item"> | <li class="nav-item dropdown"> VAERS Data <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> Action Another action Something else here </div> <li class="nav-item"> | <li class="nav-item dropdown"> Resources <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> Action Another action Something else here </div> <li class="nav-item"> | <li class="nav-item"> Submit Follow-Up Information </div> <!--/.Collapse content--> </div> </nav> <!--/.Navbar-->

Hi, can you show us your code?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags