Forum | Appery.io

The navbar displays too large in the tester when I set it to no icon. I want it to look like it does in the builder. I have tried lots of different ways to set this but can't find a solution. The closest that I have gotten is:
[data-role="navbar"] ul{
height:30px;
overflow: hidden;
}
This sizes it like I need but the text doesn't display.
This how it should look(how it looks in the builder):

This is how it displays in the tester:

This is how it displays with the CSS applied:

Public Link:
a rel="nofollow"http://appery.io/app/mobile-frame?src=h ... e=mobile/a

Hi Matt,

How we can reproduce it? I can't see any navbar on your provided link.

I'm sorry, I just reset the home screen to the needed page so the link should work now.

Hello Matt,

Thank you for update.

The link is just to view the page that has the Navbar problem so this thread shouldn't be marked Answered yet.

Hello Matt,

Sorry, i'm not sure I understand you correctly, do you need Support Team to help? And the tread becomes marked Answered when there is at least one reply from employer.

Oh ok, yes I still need support on my original question at the top. Thank you.

Hi Matt,

I've checked your app and here is a solution for you:

1 Open your "CSS1" asset.

2 Delete following css code from this css asset:

pre

[data-role="navbar"] ul{
height:30px;
vertical-align:text-top;
overflow: hidden;
}

/pre

3 Add following css code to this css asset:

pre

//Note you need replace "mobilenavbar_194" with your mobile navbar name.
[name="mobilenavbar_194"] .ui-btn-icon-top{
padding-top: 9px;
}

/pre

That's all.

Regards.

Excellent! That worked perfectly!
Thank you very much for your help.