I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this problem?
For reference, here is the link to my codepen: https://codepen.io/okaykaylyn/pen/bQWXqq
<!-- Fixed top -->
<nav class="navbar sticky-top navbar-dark bg-dark justify-content-end" id="fix_nav">
<a class="navbar-brand ml-auto" href="#"><i class="fas fa-user"></i></a>
<a class="navbar-brand" href=""><i class="fas fa-cog"></i></a>
</nav>
<!-- floating nav -->
<div class="container col-12">
<nav class="mt-3 navbar navbar-dark bg-dark navbar-expand-lg rounded" id="float_nav">
<a class="navbar-brand" href="#">
<img src="https://image.ibb.co/cZBKcq/Asset-2.png" id="logo"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-left d-flex" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Accounts
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">My Accounts</a>
<a class="dropdown-item" href="#">Agency Accounts</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Indications</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Products & Applications</a>
<a class="dropdown-item" href="#">Claims Examples</a>
<a class="dropdown-item" href="#">Reports</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fun</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">News</a>
<a class="dropdown-item" href="#">Charity</a>
</div>
</li>
</ul>
</div>
</nav>
Note: It's worth mentioning that EA prohibits Internet Explorer users from accessing their website. Could this restriction be causing the compatibility issue?