1

I was looking for a way to display the "dropdown nav" with full width and luckily I found a topic, answered by Bass Jobse.

Unfortunately, I identified one compatibility issue with Safari browser. As you can see in the picture below, when I remove the mouse from menu link, the dropdown nav stays there, like a "ghost nav".

enter image description here

This bug only occurs in Safari browsers and appears to be related to property "position: static", as you can verify in Bootply.

Please, could someone help me to solve this issue?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Brightweb
  • 233
  • 1
  • 8
  • 25

1 Answers1

2

Chrome does not have the issue, but i found other webkit browsers (tested with reconq) indeed have the issue describe above.

As far as i do understand the issue the following happens:

when removing the open class from .nav > li.dropdown its children got: position: relative (parent) display:hidden. The area of the preceding is smaller than the width of the position: static (parent) display:block.

So when switching between open / not open Webkit does only hide the position: relative (parent) display:hidden area.

Solution apply position: static on both the situation with and without the open class:

.nav > li.dropdown { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

So use nav > li.dropdown { position: static; } instead of nav > li.dropdown.open { position: static; }

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224