02.26c22v5 Left Menu – Middle Logo – Right Menu

Description

• left menu – middle logo – right menu

If header uses Logo, use this code

<script>
document.addEventListener('DOMContentLoaded', function(){
  const nav = document.querySelector('.header-display-desktop nav.header-nav-list');
  const logoWrapper = document.querySelector('.header-display-desktop .header-title-logo');
  const logoAnchor = logoWrapper ? logoWrapper.querySelector('a') : null;

  if(!nav || !logoWrapper || !logoAnchor) return;

  const items = Array.from(nav.querySelectorAll('.header-nav-item'));
  const half = Math.ceil(items.length / 2);
  const leftItems = items.slice(0, half);
  const rightItems = items.slice(half);

  const leftNav = document.createElement('nav');
  leftNav.className = 'header-nav-list header-nav-list--left';
  leftItems.forEach(item => leftNav.appendChild(item));

  const rightNav = document.createElement('nav');
  rightNav.className = 'header-nav-list header-nav-list--right';
  rightItems.forEach(item => rightNav.appendChild(item));

  logoWrapper.insertBefore(leftNav, logoAnchor);
  logoWrapper.appendChild(rightNav);

  nav.closest('.header-nav')?.remove();
});
</script>
<style>
.header-display-desktop {
    flex-direction: column;
}
div.header-title-logo {
    display: flex;
    align-items: center;
    justify-content: center !important;
}
div.header-title-logo div.header-nav-item {
    margin-right: 2.5vw;
    margin-left: 2.5vw;
}
nav.header-nav-list.header-nav-list--left {
    margin-right: 5vw;
}
nav.header-nav-list.header-nav-list--right {
    margin-left: 5vw;
}
</style>

If header uses Site Title, use this code

<script>
document.addEventListener('DOMContentLoaded', function(){
  const nav = document.querySelector('.header-display-desktop nav.header-nav-list');
  const logoWrapper = document.querySelector('.header-display-desktop .header-title div');
  const logoAnchor = logoWrapper ? logoWrapper.querySelector('a') : null;

  if(!nav || !logoWrapper || !logoAnchor) return;

  const items = Array.from(nav.querySelectorAll('.header-nav-item'));
  const half = Math.ceil(items.length / 2);
  const leftItems = items.slice(0, half);
  const rightItems = items.slice(half);

  const leftNav = document.createElement('nav');
  leftNav.className = 'header-nav-list header-nav-list--left';
  leftItems.forEach(item => leftNav.appendChild(item));

  const rightNav = document.createElement('nav');
  rightNav.className = 'header-nav-list header-nav-list--right';
  rightItems.forEach(item => rightNav.appendChild(item));

  logoWrapper.insertBefore(leftNav, logoAnchor);
  logoWrapper.appendChild(rightNav);

  nav.closest('.header-nav')?.remove();
});
</script>
<style>
.header-display-desktop {
    flex-direction: column;
}
div.header-title-logo {
    display: flex;
    align-items: center;
    justify-content: center !important;
}
div.header-title-logo div.header-nav-item {
    margin-right: 2.5vw;
    margin-left: 2.5vw;
}
nav.header-nav-list.header-nav-list--left {
    margin-right: 5vw;
}
nav.header-nav-list.header-nav-list--right {
    margin-left: 5vw;
}
  div.header-title .header-nav-item:not(:first-child) {
    margin-left: 1.5vw;
}
div.header-title .header-nav-folder-content {
    display: none;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: -1em;
    right: auto;
    padding: .5em 1em;
    text-align: left;
    min-width: 200px;
    z-index: 10;
    text-align: left;
}
div.header-title .header-nav-item--folder:hover .header-nav-folder-content {
    display: block;
    pointer-events: auto;
}
div.header-title .header-nav-item--folder {
    position: relative;
}

.header-actions.header-actions--right {
    position: absolute;
    right: 0;
}
</style>

If has problem with dropdown, use this extra CSS

div.header-title .header-nav-item:not(:first-child) {
    margin-left: 1.5vw;
}
div.header-title .header-nav-folder-content {
    display: none;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: -1em;
    right: auto;
    padding: .5em 1em;
    text-align: left;
    min-width: 200px;
    z-index: 10;
    text-align: left;
}
div.header-title .header-nav-item--folder:hover .header-nav-folder-content {
    display: block;
    pointer-events: auto;
}
div.header-title .header-nav-item--folder {
    position: relative;
}

.header-actions.header-actions--right {
    position: absolute;
    right: 0;
}