Hey devs!
I am building a web app using StencilJS (2.3) and Ionic (5.2.3). I want to build a desktop navigation bar. I am trying to use an ion-toolbar but the toolbar (I think?) is clipping my dropdown menus and other content.
I think this is the same issue but no one proposed a solution: How to make a bootstrap dropdown extend outside of ion-header / ion-toolbar?
An example of the dropdown being clipped or cut off in the toolbar/header
<ion-header>
<ion-toolbar>
<div slot="start">
<div>
<sl-dropdown hoist={ true }>
<sl-button slot="trigger" caret>Dropdown</sl-button>
<sl-menu>
<sl-menu-item>Dropdown Item 1</sl-menu-item>
<sl-menu-item>Dropdown Item 2</sl-menu-item>
<sl-menu-item>Dropdown Item 3</sl-menu-item>
<sl-menu-divider></sl-menu-divider>
<sl-menu-item checked>Checked</sl-menu-item>
<sl-menu-item disabled>Disabled</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
</div>
</ion-toolbar>
</ion-header>
An alternate question could be: is this an appropriate method to creating a desktop nav? Should I not wrap my nav in a toolbar and place this somewhere else, only showing it on desktop?
Any advice would be appreciated!