Page overlaps tabs when navigated from a modal - Rc0


My problem: I have a tabs page, and on the ‘Home’ tab you cant click the search button which brings up a modal. If i navigate to a page from clicking a button in that modal, it navigates correctly but the new page covers the tabs.
See images
Home page

After clicking on the search icon above, it presents a transparent modal like so:

When i click “Go to location” it goes to the appropriate location but covers the Tabs:

The expected behaivior is that it navigates to the new page but inside the home so:

This happens normally if i click the first Orange button in the home page.

So i deduce that the problem is from navigating from the modal to the page.
I tried dismissing the modal before navigating to the page

gotoLocation(){ this.dismiss() .then(()=>{ this.navCtrl.push(LocationPage); }); }
that didn’t work, so itried navigating to the page before dismissing the modal
gotoLocation(){ this.navCtrl.push(LocationPage) .then(()=>{ this.dismiss(); }); }

Any ideas on how i can achieve this? i hope this question is clear and not vague.