Annoying Bootstrap Menu issue in Safari

1k Views Asked by At

I am having a really annoying issue with a Bootstrap Menu in Safari on OSX / IOS devices.

If you have a look at this page:

Link Removed

In chrome or Firefox you will see how it should look, however if you look in Safari, the middle section of the menu isn't flush to the top. This causes issues when viewing on an iPad as the text overlaps. It should look like this:

How it should look on tablet http://www.nick-harper.co.uk/howitshouldlook.gif

However, it is like this:

How it looks http://www.nick-harper.co.uk/ipad.gif

I have tried various different things but can't seem to figure out what causes it specifically in Safari.

Are there any common issues that could cause it I am missing?

1

There are 1 best solutions below

0
On

Summarizing comments under the question, the problem was float:left. It made height of a few elements to be equal 0. Also position:unset is invalid so position:absolute from another selector was in use.