Remove or Edit Drop Down Menu On Mobile

My Website is https://rotordroneservices.squarespace.com

I'm having issues with he mobile version drop down menu having loads of blank space between the top and social buttons as shown in the attached photo. Either I want to remove the drop down completely or add shortcuts to scroll to sections of my one page website. If anyone has any suggestions, please send them my way. I can't figure it out at he moment.

Thanks

You want

• Remove burger menu on mobile
• Force Social Icons/Button appear next to Logo on Mobile

Is this right?

Yes that is correct!

1 hour ago, kylemacd said:

Yes that is correct!

How about make them on 2 rows? If same row, they too big, will overlap together

I'm thinking it would look better by putting the logo as the title of the section below and leave the social links in the header. Or do 2 rows like you said if that is basically equivalent.

On 11/9/2022 at 3:50 AM, kylemacd said:

I'm thinking it would look better by putting the logo as the title of the section below and leave the social links in the header. Or do 2 rows like you said if that is basically equivalent.

Try adding to Design > Custom CSS

@media screen and (max-width: 767px) {
.header-display-mobile {
    flex-direction: row-reverse;
    flex-wrap:wrap;
    justify-content: center !important;
}
.header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta {
    display: flex;
}

.header-title-nav-wrapper {
    order: 1;
}

.header-actions.header-actions--right {
    order: 3;
    width: 85%;
    justify-content: center !important;
}
.header-burger {
    order: 2
}
.icon {
    display: inline-block;
}
.header .header-title-nav-wrapper {
    flex: 1 0 100%;
}
.header-burger {
    display: none;
}
.header-mobile-logo {
    padding-right: 0 !important;
    padding-bottom: 20px
}}

It looks better now. Is there any additional CSS code that can delete the dropdown menu since its not needed anymore? Thanks for the help!