Ionic Toolbar Stays On top for child pages

This might be a silly question with a really simple answer but I can’t seem to figure it out. I have a page called culture with an ion toolbar and one of the buttons is called events which shows a listing of events. Each event within that list can be clicked to show an event detail. However in the event detail, the root parent page (culture) toolbar is still sticking at the top like so:

Any help for this noob?

thank you!

Ustad

I’ve never done that but it sounds strange?

Can you upload a simple app to Github, or somewhere so we can see exactly what you are doing?

Thanks IonicGeoff for the lightning quick response!
Unfortunately my whole app is a bit of a mess as its a work on progress and I’ve got some sensitive urls and api keys that I’d have to mask out. Hopefully the following information will be helpful:

Here is my culture page routing - where culture is part of the main menu within the hamburger menu:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CulturePage } from './culture.page';

const routes: Routes = [
    {
        path: '',
        component: CulturePage,
        children: [
            {
                path: 'events',
                children: [
                    {
                        path: '',
                        loadChildren: './events/events.module#EventsPageModule'
                    },
                    {
                        path: 'event-details',
                        loadChildren: './events/event-details/event-details.module#EventDetailsPageModule'
                    },
                ]
            },
            {
                path: 'venues',
                children: [
                    {
                        path: '',
                        loadChildren: './venues/venues.module#VenuesPageModule'
                    },

                ]
            },
            {
                path: '',
                redirectTo: '/culture',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/culture',
        pathMatch: 'full'
    },
},
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class CultureRoutingModule { }

And here is my culture page that houses the 2 tab buttons within a tab bar:

<!-- <ion-header> -->
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Culture</ion-title>
    </ion-toolbar>
  <!-- </ion-header> -->
  
  <ion-content>
  
  <ion-tabs>
      <ion-tab-bar slot="top">
        <ion-tab-button tab="events">
          <ion-icon name="calendar"></ion-icon>
          <ion-label>Events</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>
    
        <ion-tab-button tab="venues">
          <ion-icon name="contacts"></ion-icon>
          <ion-label>Venues</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
    
  </ion-content>
  

Here is the events page which is tied to the events tab button:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2">
        <ng-container *ngIf="$events | async as events; else eventsError">
          <div *ngIf="isLoading" text-center>
            <ion-spinner></ion-spinner>
          </div>

          <div *ngIf="!isLoading && events.length != 0 ">
          <ion-list *ngFor="let event of events">
                <ion-item (click)="openEventDetails(event)" detail>
                <ion-label>
                  <h2>{{ event.title }}</h2>
                  <p>{{ event.Summary }}</p>
                  <p>{{ event.StartDate }}</p>
                </ion-label>
              </ion-item>
          </ion-list>
        </div>

          <div *ngIf="!isLoading && events.length == 0 && error == false" text-center>
            <p>No events!</p>
          </div>

          <div *ngIf="!isLoading && error == true" text-center>
            <p>Error fetching request... try again later.</p>
          </div>
        </ng-container>
        <ng-template #eventsError>
          <div text-center>
            <p>Could not load events at this time</p>
          </div>
        </ng-template>
        
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Once a user clicks on an event, it goes to the event detail page which I’d like to open in a new page with a back nav button without the button tab bar. I open the event detail page programmatically by using the NavigationExtras object as part of the Angular Router (provided snippet of events ts:

 openEventDetails(details) {
    console.log('openEventDetails:', details);
    const navigationExtras: NavigationExtras = {
      state: {
        eventDetails: details
      }
    };
    this.router.navigate(['/culture/events/event-details'], navigationExtras);
  }

Hope this is clear…
thank you so much again!
Ustad

One tutorial that i read, says to put the main toolbar code on every single page. Sounds wrong to me, soo, i have this same problem for now…I tried to put a margin on toolbar, not success…