# Padding top on ion-navbar for lab iOS **URL:** \ **Category:** ionic-v3\ **Created:** [November 18, 2017, 1:42pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575 "2017-11-18T13:42:02Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![sergiofigueras](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sergiofigueras/32/114934_2.png) [@sergiofigueras](https://forum.ionicframework.com/u/sergiofigueras)\ **Post date:** [November 18, 2017, 1:42pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/1 "2017-11-18T13:42:02Z")
Hello guys, I’m trying to build a very simple navbar here, but the padding-top of it on iOS is by far very different from what I’m planning. What I need is: ![33 AM](https://global.discourse-cdn.com/ionicframework/original/3X/a/2/a2007e6c166bc69f6255a69bea8806e601d097b8.png) What I currently have is: ![12 AM](https://global.discourse-cdn.com/ionicframework/original/3X/2/7/27b3b739a9a71a86f55c4575600d8fe90db3ba90.png) Despite the fact that there’re still some style missing, for buttons / font, as you can see in my sample my navbar is currently overriding iOS default bar. So, the source code that I currently have is quite simple: ```auto {{ titulo }} ``` It sounds like a very simple stuff, but as I’m newbie on ionic I would like to rely on your expertise, folks 🙂 Could anyone please in advice me why its happening or if its only some bug with Lab that won’t happen in real world? Thanks! ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 18, 2017, 2:08pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/2 "2017-11-18T14:08:20Z")
Did you put your `ion-navbar` in an `ion-header` ? ``` ... Here your content ``` ---
**Author:** ![sergiofigueras](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sergiofigueras/32/114934_2.png) [@sergiofigueras](https://forum.ionicframework.com/u/sergiofigueras)\ **Post date:** [November 18, 2017, 2:16pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/3 "2017-11-18T14:16:51Z")
Hello there @reedrichards, Thanks for your reply. But the fact is that yes: I’ve created it inside a ion-header. Its called as: ```auto ``` Thanks! ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 18, 2017, 3:08pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/4 "2017-11-18T15:08:51Z")
☹ Are you able to reproduce the problem while running `ionic server` and debugging in Chrome? When you remove your custom css do you face the problem too? Just some ideas… ---
**Author:** ![sergiofigueras](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sergiofigueras/32/114934_2.png) [@sergiofigueras](https://forum.ionicframework.com/u/sergiofigueras)\ **Post date:** [November 18, 2017, 3:17pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/5 "2017-11-18T15:17:41Z")
Hello there @reedrichards! I tried to run with `ionic serve` only, and as it doesn’t displays the iOS edges, so I don’t know if that would happen in realtime. This is how its rendered in Chrome with `ionic serve`: ![45 PM](https://global.discourse-cdn.com/ionicframework/original/3X/6/d/6d01b0d7251c7063d10b6be9fcefe7ed93c57316.png) And in fact I’ve no custom CSS. I’ve only overriden two color properties from variables.scss. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [November 18, 2017, 4:38pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/6 "2017-11-18T16:38:18Z")
@sergiofigueras so I understand correctly ionic serve =\> ok ionic something else to simulate a device =\> not ok … well then, maybe is your cordova-plugin-statusbar up-to-date? what are you ionic info? honestly that’s weird but you may find something on the forum about it also did you had the look to this [http://blog.ionicframework.com/ios-11-checklist/](http://blog.ionicframework.com/ios-11-checklist/) ? (note since the creation of the post, the statusbar has been release, so using the last one is ok) ---
**Author:** ![dball](https://avatars.discourse-cdn.com/v4/letter/d/5f8ce5/32.png) [@dball](https://forum.ionicframework.com/u/dball)\ **Post date:** [December 7, 2018, 10:38pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/7 "2018-12-07T22:38:57Z")
I recently took over an ionic application which had CSS that was a mess. The original developer had also attempted to reuse HTML as did yours. What turned out to be the problem is that the ionic CSS demands a very specific hierarchy. Your attempting to achieve HTML reuse with a component butts heads with the design principles of Ionic when it comes to CSS. An example of a CSS selector that is supposed to provide this padding is: .ios ion-nav \> .ion-page \> ion-header \> .toolbar.statusbar-padding:first-child, I say an example as there are no less than 40 different rules that include the target of toolbar.statusbar-padding:first-child to provide padding at the top. Our basic CSS file is over 1.7 MB large and I suspect it has to do a lot with the delay in loading the application. I have not figured out if this is the only reason for the massive size. An app with no CSS modifications is still about .5 MB. It feels like someone was trying to create a design where you did not need to specify classes to identify what you were trying to accomplish to keep the HTML clean and instead introduced a very fragile CSS system that works against HTML code reuse, creates substantially larger CSS files and slower load times. Using the rule I provided as an example (you can inspect the other 39 yourself in the main.css file that you will find in the www\build folder): .ios ion-nav \> .ion-page \> ion-header \> .toolbar.statusbar-padding:first-child, The ion-navbar will have the classes toolbar and statusbar-padding added to it programmatically at runtime. For this CSS selector you can see that ion-navbar must be a direct descendant of ion-header and must be the first child within ion-header. However, ion-header must be a descendant of an element with the class .ion-page, which must in turn be the direct descendant of an ion-nav structure. You can see from this that your attempt at code reuse does not work with ionic if you mix their component hierarchy with your own. The scary part is you don’t know what items you can wrap and not wrap without trial and error or reading through either their final CSS or their scss files. For example, cordova.ios.scss in the folder node\_modules/ionic-angular/platform. There may be a better solution to this, but at the current time, moving ion-navbar outside of your component and duplicating it in all of the places that use your component is the only solution I know. This solved the problem in my case. I just executed this myself and did not notice issues with the ion-title and ion-buttons being wrapped in reusable components within the ion-navbar entry. (Edit) I spoke too early. Wrapping Ionic elements in components worked great on IOS, but not on Android. Hope this helps. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 10:03pm UTC](https://forum.ionicframework.com/t/padding-top-on-ion-navbar-for-lab-ios/112575/8 "2021-07-19T22:03:25Z")