Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

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):
Image

This is how it displays in the tester:

Image

Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

This is how it displays with the CSS applied: Image

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

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

how to change height of the navbar without an icon?

Hi Matt,

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

Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

how to change height of the navbar without an icon?

Hello Matt,

Thank you for update.

Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

how to change height of the navbar without an icon?

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.

Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

how to change height of the navbar without an icon?

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.

Matt6607699
Posts: 0
Joined: Sat Jan 25, 2014 7:18 am

how to change height of the navbar without an icon?

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

Return to “Issues”