NAVBAR on IOS looks different (PWA)

Hi guys.

My app (cordova/F7) works fine on the browser & Android platform , on iOS the NavBar component look different

On the browser and Android looks like this

On iOS looks like this

But not only looks different but also works different, when “click” on continue("Continuar) appears the Safary navigation bar like this

Could you help me please?

It looks different because you didn’t change Navbar bg color properly, it should be done via CSS variables --f7-navbar-bg-color and --f7-navbar-bg-color-rgb (used by iOS theme)

thank you … about the Safary navigation bar, is the same?

This is how Safari works itself when you tap close to the url bar, it is not possible to do something with it


Thank you very much

Hi Vladimir

I just added to the css file …

--f7-navbar-bg-color: orange ;

and index.js file …

theme: 'ios',

But I continue with looks diferent Android and ios device

Could you help me please?

Look at my comment, iOS theme uses also --f7-navbar-bg-color-rgb variable


Now the code …


    --f7-navbar-bg-color: orange ;

    --f7-navbar-bg-color-rgb : orange;


Looks with the same problem

I’m deleted history and data (safari browser) each try.

orange is not a proper RGB value, should be something like:

--f7-navbar-bg-color-rgb : 255, 0, 0;

You right !!

For last, I have seen the same issue (looks different android & ios devices) with the type font on the NavBar, is there another “parameter” that …

--f7-font-family: 'DS-POINT', 'Roboto', system-ui, Noto, Helvetica, Arial, sans-serif;

ios show with another font and in the middle the “title”

Andoid looks ok