Ionic Responsive Design and Navigation for All Screens

You already know that you can create web and mobile apps from one codebase with Ionic, but having a responsive design that looks good on all platforms is sometimes challenging.

#############################

👨‍💻 Want to read instead of watch?

😱 NEW: Capacitor Crash Course!

⚡️Take my famous 7 Day Ionic Crash Course

🤷‍♂️Want more Ionic tutorials?

#############################

❤️You can also find me...

Or join our Facebook group:

#############################

00:00 Intro
00:58 App Setup
02:35 Menu Structure
10:11 Custom Header Component
17:30 Dropdown Area
25:33 Screen Size Listener & Menu Controller
29:26 Responsive Pages with ion-grid
35:26 Outro

[TheSaceone]

Clean and simple. Cool tricks in this video aswell. This is an awesome example of how much a decent dropdown component is needed in Ionic.

[prashantkumar]

Thanku so much for this @simon. Can you please make video on background location using capacitor

[ArielKosacoff]

Amazing tutorial Simon, the best one yet !!

[dnlalb]

Im having this error on menu structure, my code looks identical:
Menu: must have a "content" element to listen for drag events on.

[carolinabascunan]

Hi! thanks for the video.... I need help :( i don't know why... but when I show the side menu, a can´t change the pages.... i can´t press the button :( i can´t for home to the products... only happens with the side menu :(

[webmobiletech]

Sir, how to make hide navigationbar android

[XxSebxX]

Simon I have a question!
How can I create a footer that goes at the end of each page (following the content) with the logic of this menu, ion-router-outlet?
I have tried several methods and all of them give me a fixed or overlapping result with the content

Thank you for your tutorials!

[xyz-eyul]

Can you do a react version of this? Tried to watch it but it takes time to understand angular code.

[wildman]

Very useful video that exactly I wanted .thank you very much most of the my ionics queries are cleared here

[rajnikantkumar]

Hlo sir...plz help me ...how to change notification icon and sound in ionic 4, 5 see so many issue ....live version .., ...plzz explain in one vedio

[jaswindersingh]

🙏🙏🙏 most important part which gives the first impression to client

[johnmarkchristianchua]

Hi guys, I'm trying to learn ionic. Can someone explain why this code is not working? I followed all the steps until here.

<ion-content>
<ion-menu-toggle *ngFor="let item of menuItems">
<ion-item button [routerLink]="item.path" routerDirection="root" [routerLinkActiveOptions] = "{exact: true}">
<ion-icon [name]="item.icon" slot="start"></ion-icon>
{{ item.title }}
</ion-item>
</ion-menu-toggle>

</ion-content>