Navigation Stacking

Site URL: https://www.kylesmith.live/

Hello all,

I'm having an issue with my navigation bar in my new music website: www.kylesmith.live

Template is Aria

Depending on the screen size of the computer that I'm viewing my site on, the navigation bar may display all seven links in landscape form (desired) or stack them into two (sometimes three) separate rows. I'd like to keep the latter from happening by somehow "freezing" the navigation bar into landscape form.

When the links are stacked, the images behind the links resize as well, overwriting my crop settings. My hope is that freezing the nav bar will keep this from happening too.

I have no experience with code, but I've been told that my issue may require a custom code. I've tried changing font sizes, toggling between full width, constrained width, and full background settings, padding, etc. Nothing seems to help. I notice the issue when I zoom in to 150% on my desktop, but also at default 100% on a 19 inch laptop screen.

Any help would be appreciated!

Add to Home > Design > Custom CSS

.Header-inner.Header-inner--bottom {
    flex-direction: column;
}
[data-nc-container="bottom-center"] {
    width: 100% !important;
}