Social Icons

Add this CSS:

@media(min-width: 768px) {
  .main-navigation .menu-bar-item.search-item {
    display: none;
  }
  .main-nav {
    flex: 1;
  }
  .main-navigation li.menu-item-float-right {
    order: 100;
  }
  .main-navigation li.search-item {
    margin-left: auto;
  }
}

Ok perfect, One last minor thing. when i click on search button its covering the social icons as well. is it possible to not cover the social icons when clicking on search button.

Add this CSS:

@media(min-width: 769px) {
  .navigation-search.nav-search-active {
    max-width: calc(100% - 177px);
  }
}

Thanks it worked fine. The Social Icons which are created via the Menu custom link are opening on the same page. Can we change it to open in a new tab when someone clicks on it.

Its a WP feature see here:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#opening-in-a-new-window-tab