Navigation dropping onto two lines

Site URL: https://the-bridge-hampton.squarespace.com

Can anyone help with my navigation. I have split it either side of the logo which looks fine until you have a smaller browser, it goes a bit weird (See attachment). I would like it to change to the mobile menu before it does this.

Login: 2123ives

Hi. Which plan do you use? If Business Plan or higher, we can use JavaScript to achieve left-right menu.

Hi @tuanphan It's a business plan.

On 5/11/2021 at 2:53 PM, Strattons said:

Hi @tuanphan It's a business plan.

Hi. First change layout to: Left Menu - Logo

Then let me know. We will check & give the code to achieve the effect.

Hi @tuanphan I have changed it to left menu

Add to Last Line in Code Injection Footer

<script>
  var _0x5378=['373915NKNUnr','1JsMIRm','268194PAbwkg','clone','349127gZiVyt','414012KvSmsy','13338vtKQZN','.header-display-desktop\x20nav.header-nav-list','insertAfter','ready','630980NgGQIK','442346ddAtvl'];var _0x259527=_0x1466;function _0x1466(_0x16b4a5,_0x5161a4){_0x16b4a5=_0x16b4a5-0x16b;var _0x5378f8=_0x5378[_0x16b4a5];return _0x5378f8;}(function(_0x4aa2db,_0x41bf28){var _0x39bcc2=_0x1466;while(!![]){try{var _0x4ebbc4=parseInt(_0x39bcc2(0x16d))+parseInt(_0x39bcc2(0x16f))+parseInt(_0x39bcc2(0x173))+parseInt(_0x39bcc2(0x172))+parseInt(_0x39bcc2(0x16e))*-parseInt(_0x39bcc2(0x16c))+parseInt(_0x39bcc2(0x171))+-parseInt(_0x39bcc2(0x16b));if(_0x4ebbc4===_0x41bf28)break;else _0x4aa2db['push'](_0x4aa2db['shift']());}catch(_0xd676b7){_0x4aa2db['push'](_0x4aa2db['shift']());}}}(_0x5378,0x544ac),jQuery(document)[_0x259527(0x176)](function(_0x35da41){var _0x332a34=_0x259527;_0x35da41(_0x332a34(0x174))[_0x332a34(0x170)]()[_0x332a34(0x175)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>

and this to Code Injection Header

<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-actions.header-actions--right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
  nav.header-nav-list {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
</style>

Thanks @tuanphan, that nearly worked but the logo seems to be slightly to the left.

Also my mega menus don't seem to be working.

And on the mobile, the line seems to be going through the logo, it should be below it.