Topic: drawer appears strange on Chrome, please help
wuyukewu
free
asked 6 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.
Add comment
Bartłomiej Malanowski
staff
answered 6 years ago
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 6 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-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags