Greetings. I’m new to ionic and trying different features. Recently implemented a custom component for header and getting a really strange issue with it. component template(nav-header-main): <ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> …

Compare the generated HTML and CSS (maybe use git for /www) and see what is different. (Interesting problem though, never tried that before) PS: You can also upload picture directly here in the forum. Much nicer.

I do not believe this is supported. I think <ion-header> must be a top-level element - i.e. you can’t bury it inside a component.

wow, that need to be documented somehow then. thought thats pretty typical to use component for header.

[image] opahopa: wow, that need to be documented somehow then. It is : It’s important to note that ion-header needs to be the one of the three root elements of a page

Custom component view issue (ionic 3 bug?)

Ionic Framework ionic-v3

Topic		Replies	Views
Custom Header Component ionic-v3	11	8004	October 15, 2018
Custom component not working properly inside <ion-header> ionic-v3	4	3283	August 27, 2018
Custom component inside ion-header Ionic Framework	9	4030	March 11, 2019
Beta 10 breaking change "ion-nav is required in the root component" ionic-v3	2	808	June 30, 2016
Reusable Component for ion-header (and footer) Ionic v4 Ionic Framework	1	1566	February 19, 2021

Custom component view issue (ionic 3 bug?)

Related topics