Using ion-toolbar as a desktop nav, clipping dropdown menus

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

Screen Shot 2020-12-20 at 3.09.53 PM

        <div slot="start">
                <sl-dropdown hoist={ true }>
                    <sl-button slot="trigger" caret>Dropdown</sl-button>
                        <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-item checked>Checked</sl-menu-item>
                        <sl-menu-item disabled>Disabled</sl-menu-item>

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!