Centre logo with navigation either side of it

hi there

I'm trying to centre my logo with navigation options either side of it. There isn't an option for this in the standard header designs, so I'm assuming I'll need to insert some custom css to achieve it. Any advice would be greatly appreciated.

Thanks

Emma

(1) First, Change header layout to Left Menu – Middle Logo like below

(2) Use this code to Website > Website 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-actions.header-actions--right');
})
</script>

This code will duplicate the Left Menu and add it to the Right Menu, and you will have.

(3) Use this code to Website > Website Tools > Custom CSS

/* Hide item 1, 2 from right menu */
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {
    display: none;
}
/* Hide item 3, 4 from left menu */
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {
    display: none;
}
/* add space between item 3, 4 in right menu */
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
/* fix items disappear */
div.header-nav-item a {
	opacity: 1 !important;
}

/* Move menu closer logo */
.header-actions.header-actions--right {
    justify-content: flex-start !important;
}
.header-nav-wrapper {
    text-align: right;
}
.header-nav nav.header-nav-list>div {
    margin-right: 0 !important;
    margin-left: 2.7vw !important;
}

Hi thanks so much for quick response. I've made the code suggestions and its definitely getting there, but the shopping cart is kind of in the way and it's uneven. I've fiddled around with the n+ numbers but I'm just hiding things. Sorry can you help again? 

On 4/29/2024 at 5:16 PM, weebluepress said:

Hi thanks so much for quick response. I've made the code suggestions and its definitely getting there, but the shopping cart is kind of in the way and it's uneven. I've fiddled around with the n+ numbers but I'm just hiding things. Sorry can you help again? 

Can you share site url? I can check problem easier

Thanks it's https://onion-bluebird-cy7n.squarespace.com/ 

pw EmmaDeerRed

Much appreciated. I've sorted the navigation items it is just the shopping cart I can't seem to do anything with.

On 5/1/2024 at 4:50 PM, weebluepress said:

Thanks it's https://onion-bluebird-cy7n.squarespace.com/ 

pw EmmaDeerRed

 

Much appreciated. I've sorted the navigation items it is just the shopping cart I can't seem to do anything with.

Add this code to Website > Website Tools > Custom CSS

nav.header-nav-list {
    order: 1 !important;
}
.showOnDesktop {
    order: 2 !important;
}