CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss
Gabriel Souza
Gabriel Souza

Reputation: 1015

Bootstrap dropdown menu not working as expected on Microsoft Edge

This same dropdown menu works great on Chrome, Firefox and IE. On Microsoft Edge the dropdown menu is showing but below the position it should appear, and is also moving the hamburguer icon from it's default position. I have no idea what could it be, i'll be grateful if anyone knows.

Here's the JSFiddle

$('.dropdown').hover(
    function() {
        $(this).find('.dropdown-menu-nav').show();
    }, 
    function() {
        $(this).find('.dropdown-menu-nav').hide();
    }
);
.header-menu {
  padding: 0;
  background: #fff;
}

.navbar .navbar-nav {
  width: 100%;
  display: table;
}

.navbar .navbar-nav .nav-item {
  display: table-cell;
  height: 70px;
  vertical-align: middle;
  border: 1px solid #000;
}

.navbar .navbar-nav .nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  color: #E90020;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  background: grey;
}

.navbar .navbar-nav .nav-item:first-child .nav-link:before {
  content: "\f0c9";
  font-family: FontAwesome;
  margin-right: 0;
  font-size: 22px;
  line-height: initial;
  color: #fff; 
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.todas-as-categorias-span {
  display: block;
}

.dropdown-menu-nav { 
  width: 100px; 
  margin: 0;
  padding: 0;
  text-align: center; 
  color: #000;
  border-width: 0 3px 3px 3px;
  border-color: #f9b414;
  border-style: solid;
  border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<nav class="navbar header-menu">
    <ul class="navbar-nav">
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 1
        <span class="todas-as-categorias-span">Categorias</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav"></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 2</a>
        <div class="dropdown-menu dropdown-menu-nav"></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 3</a>
        <div class="dropdown-menu dropdown-menu-nav"></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 4</a>
        <div class="dropdown-menu dropdown-menu-nav"></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 5</a>
        <div class="dropdown-menu dropdown-menu-nav"></div>
      </li>
    </ul>
   </nav>

Upvotes: 1

Views: 2080

Answers (1)

steve
steve

Reputation: 1856

Adding a few height:100% and moving the nav height to the outer div fixes the problem.

https://jsfiddle.net/9zt1gLLL/1/

$('.dropdown').hover(
    function() {
        $(this).find('.dropdown-menu-nav').show();
    }, 
    function() {
        $(this).find('.dropdown-menu-nav').hide();
    }
);
.header-menu {
	padding: 0;
	background: #fff;
	height: 70px;
}

.navbar .navbar-nav {
  width: 100%;
  height:100%;
  display: table;
}

.navbar .navbar-nav .nav-item {
	display: table-cell;
	vertical-align: middle;
  border: 1px solid #000;
  height:100%;
}

.navbar .navbar-nav .nav-link {
  display: flex;
  height:100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	padding: 0;
  margin:0;
	color: #E90020;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
  background: grey;
}


.navbar .navbar-nav .nav-item:first-child .nav-link:before {
	content: "\f0c9";
	font-family: FontAwesome;
	margin-right: 0;
	font-size: 22px;
	line-height: initial;
	color: #fff; 
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.todas-as-categorias-span {
	display: block;
}

.dropdown-menu-nav { 
	width: 100px; 
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000;
	border-width: 0 3px 3px 3px;
	border-color: #f9b414;
	border-style: solid;
	border-radius: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar header-menu">
    <ul class="navbar-nav">
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 1
        <span class="todas-as-categorias-span">Categorias</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav"><ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        </ul></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 2</a>
        <div class="dropdown-menu dropdown-menu-nav"><ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        </ul></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 3</a>
        <div class="dropdown-menu dropdown-menu-nav"><ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        </ul></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 4</a>
        <div class="dropdown-menu dropdown-menu-nav">
        <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        </ul></div>
      </li>
      <li class="nav-item dropdown dropdown-nav">
        <a class="nav-link" href="#">Item 5</a>
        <div class="dropdown-menu dropdown-menu-nav"><ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        </ul></div>
      </li>
    </ul>
   </nav>

Upvotes: 1

Related Questions