Flexbox menu not working on Safari 8

Question

I am using a WordPress Theme with a header menu built using flexbox. It works well on modern browsers but on Safari 8 the menu disappears.

I already tried using some fallbacks (e.g. css tables) but still nothing. Do you know how can I fix this?

Container:

#nav .sf-menu {
    display: flex;
    list-style: none;
     margin: 0;
}

Links:

#nav .sf-menu > li {
    display: inline-flex;
    align-items: center;
    position: relative;
}

Answer 1

caniuse tells you that Safari 8 needs -webkit- prefixes for Flexbox to work.

For example:

display: -webkit-flex;

You can use autoprefixer to automatically add prefixes to your CSS.