[Share] Left Menu - Middle Logo - Right Menu/Social/Button

Here is some quick steps to achieve layout in screenshot: Left Menu - Middle Logo - Right Menu/Social/Button.

If you can't make it work, you can share site url in comment or message me, I can check easier.

#1. First, edit Site Header > Use this layout

You will have this.

#2. Use this code to Custom CSS box

/* Hide items: 4, 5, 6, 7... from Left Menu */
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {
  display: none;
}
/* Hide items: 1, 2, 3 from Right Menu */
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {
  display: none;
}
/* set space between menu items */
  .header-nav-item:nth-child(n+4) {
    margin-right: 1.5vw;
}
/* Move Right Menu from Right of button to Left of Social */
div.header-actions nav.header-nav-list {
    order: 1 !important;
    flex-wrap: nowrap;
}
div.header-actions-action {
    order: 2 !important;
}
/* Equal space between right nav items, social icons, button */
div.header-actions-action--cta {
    margin-left: 1.5vw !important;
}
div.header-actions-action--social a {
    margin: 0 !important;
    margin-left: 1.5vw !important;
}
div.header-actions nav.header-nav-list div:last-child {
    margin-right: 0px !important;
}

#3. Use this code to 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>

#4. Result

#5. Note

• I have written specifically what each code will do in the CSS box (#2), you can rely on that to make further adjustments.
• The code in #3 will duplicate Left Menu and insert it to the right of Header. Don't edit #3 code.

Thanks @tuanphan

I've got the header set up but I want the links closer to the central logo. 

I've added 

.header-nav-list {
  margin-left: 15vw;
}

to get the left side closer but no code I'm trying is working on the right hand side. 

Not sure if this is the best way to do it anyway? 

Please can you help? Really appreciate it!

URL: https://www.regencyhistory.net/

You can use this code to Website Tools > Custom CSS

.header-nav-list {
    width: 100%;
}
div.header-nav-wrapper nav {
    justify-content: flex-end;
}
div.header-nav-wrapper nav div.header-nav-item:nth-child(2) {
    margin-right: 0 !important;
}

If you see right nav disappear on some pages, you can use this to Website Tools > Custom CSS

div.header-nav-item>a {
    opacity: 1 !important;
}

If you want to move nav closer logo, use this code to Custom CSS box

div.header-nav nav.header-nav-list {
    position: relative;
    right: -50px;
}
div.header-actions nav {
    position: relative;
    left: -50px;
}

our issue is when picking layouts for most the login and cart are split by the social links icons.  How do we get Login and cart together on the right side?

3 hours ago, motiv8media said:

our issue is when picking layouts for most the login and cart are split by the social links icons.  How do we get Login and cart together on the right side?

 

Can you share link to your site? I can check problem easier

THANK YOU SO MUCH! For the most part, I got it work, just two small issues on the menu to right of the logo. 1. the menu is uneven and sits higher than the left side 2. one of my menu items is Dropdown folder, instead of hiding the dropdown it is now displaying the 2 other pages in the dropdown below. Any pointers on how to adjust it? Thank you!

2 hours ago, thomas1 said:

THANK YOU SO MUCH! For the most part, I got it work, just two small issues on the menu to right of the logo. 1. the menu is uneven and sits higher than the left side 2. one of my menu items is Dropdown folder, instead of hiding the dropdown it is now displaying the 2 other pages in the dropdown below. Any pointers on how to adjust it? Thank you!

Can you share site url? I can check problem easier

Im still in the building/trial stage, let me of that doesn't work

https://dealer-direct-detail.squarespace.com/

50 minutes ago, thomas1 said:

Im still in the building/trial stage, let me of that doesn't work

https://dealer-direct-detail.squarespace.com/

You can follow this

Site password is DDD

Hi there just checking to see if you were able to look into this? I still can't get the menu folder to work properly and cant figure out why the menu is not aligned, the right side is higher than the left.

Thank you!

On 10/24/2024 at 11:32 AM, thomas1 said:

Hi there just checking to see if you were able to look into this? I still can't get the menu folder to work properly and cant figure out why the menu is not aligned, the right side is higher than the left.

Thank you!

You can use this extra code to Website Tools > Custom CSS

/* Fix dropdown in left right menu */
.header-actions--right .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-actions--right a.header-nav-folder-title {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-actions--right .header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 1;
    pointer-events: auto;
}

tuanphan THANK YOU SO MUCH for your help!!!!

I was able to create a split navigation, but I am running into the problem that when I decrease the size of the browser window, the right-hand side of the nav menu wraps and ends up underneath the centered logo, I have tried multiple things to fix it and nothing seems to work.

15 hours ago, dmbmedia said:

I was able to create a split navigation, but I am running into the problem that when I decrease the size of the browser window, the right-hand side of the nav menu wraps and ends up underneath the centered logo, I have tried multiple things to fix it and nothing seems to work.

Can you share site url? I can check easier