Menu in both sides of the logo

Hi, I'm looking for help trying to make my menu options be on both sides of my logo. I'm on version 7.1 and can't find how to do it. 
This is how it currently looks: 

Now my reference is to make it look like this:

Can anyone help or point me in the right direction to get it done? 

THANKS in advanced!!!

Sadly, in 7.1 you can't do this...

Typically for users I write in an additional Header Navigation in the Footer and Move the Additional Navigation to the right side of the header using a Script.  Same for the Search Function...

You can change header layout to Left Nav - Middle Logo, we can give some code to split left nav & move a halft of left nav to right of logo.

With search, you can add a Navigation item with URL /search, we can give code to rename this item to a Search icon

Hi Tuan, I would love that code to split the Left Nav with Middle Logo!

On 7/12/2023 at 12:01 AM, MaryGraceTKC said:

Hi Tuan, I would love that code to split the Left Nav with Middle Logo!

You need to do that first, then share site url, we can give code easier

Thanks Tuan - https://www.test.magnificatfamilymedicine.com/ 

We want it to look more like the current website here https://magnificatfamilymedicine.com/

Thank you so much in advance!

On 7/19/2023 at 11:06 PM, MaryGraceTKC said:

Thanks Tuan - https://www.test.magnificatfamilymedicine.com/ 

We want it to look more like the current website here https://magnificatfamilymedicine.com/

 

Thank you so much in advance!

You mean move these?

and move 2 icons to top left corner?

Yes we would like the menu pages split, 3 on one side of the logo and 3 on the other.  If we could split it up also so that the social icons are at the top left and the payment button is at the top right, that would be incredible.  

On 7/19/2023 at 11:06 PM, MaryGraceTKC said:

Thanks Tuan - https://www.test.magnificatfamilymedicine.com/ 

We want it to look more like the current website here https://magnificatfamilymedicine.com/

 

Thank you so much in advance!

Add to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().appendTo('.header-display-desktop .header-title-nav-wrapper');
   $('.header-actions.header-actions--right').appendTo('.header-display-desktop');
})
</script>
<style>
  .header-title-nav-wrapper>nav .header-nav-item:nth-child(-n+3) {display: none;}
.header-title-nav-wrapper>.header-nav .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-title-nav-wrapper>nav * {
    opacity: 1;
    transform: unset;
}
/* Fix dropdown */
.header-title-nav-wrapper>nav a {
  color: var(--navigationLinkColor);
}
.header-title-nav-wrapper>nav .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    padding: .5em 1em;
    text-align: left;
    width: 200px;
    z-index: 10;
    margin-left: -1em;
}
.header-title-nav-wrapper>nav a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-title-nav-wrapper>nav .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}
.header-title-nav-wrapper>nav .header-nav-item:nth-child(-n+3) {display: none;}
.header-title-nav-wrapper>.header-nav .header-nav-item:nth-child(n+4) {display: none;}
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
.header-title-nav-wrapper>nav * {
    opacity: 1;
    transform: unset;
}
/* Fix dropdown */
.header-title-nav-wrapper>nav a {
  color: var(--navigationLinkColor);
}
.header-title-nav-wrapper>nav .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    padding: .5em 1em;
    text-align: left;
    width: 200px;
    z-index: 10;
    margin-left: -1em;
}
.header-title-nav-wrapper>nav a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-title-nav-wrapper>nav .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100% !important;
}

.header-actions.header-actions--right {
    width: 100% !important;
    justify-content: space-between;
}

.header-display-desktop {
    flex-direction: column-reverse;
}

.header-actions.header-actions--right:last-child {
    display: none;
}
</style>