Navigation links either side of logo in site header

@creedon Hi, yeah i had changed that value to get the navigation in line with 'studio' in the logo.

Originally I had changed the top value in the split navigation code to achieve this but thought i'd try with the line hight in the site navigations instead to see if it helped with the issues i had. Have reverted back to using the top value in the below code to achieve it. Both seem to make no difference to helping with the issues.

/*Make split navigation*/
.header-nav {
position: absolute;
top: 130px;
bottom: 0;
margin-top: 0!important;
}
.header-nav-item:nth-of-type(2) {
margin-right: 345px!important;
}

Hi @tuanphan,

I'm looking to have the primary navigation split and show on either side of the centered logo on my website. 

Heres the site: https://antelope-yellow-wjax.squarespace.com/ 

Password: test

What code do I need to achieve this? Would you be able to help me? Thanks so much.

@alana

You don't need any code. Split your links across the Primary Navigation and Secondary Navigation in Pages.

Then go to Design > Site Styles.

Click on each set of navigation links. Set their placement with the settings offered on the left.

Save your changes.

Let us know how it goes.

8 minutes ago, creedon said:

@alana

You don't need any code. Split your links across the Primary Navigation and Secondary Navigation in Pages.

Then go to Design > Site Styles.

Click on each set of navigation links. Set their placement with the settings offered on the left.

Save your changes.

Let us know how it goes.

Thanks @creedon! I had it set up like that beforehand, but now the client is wanting to add a few important links to the top right corner in a bar above the nav and logo. So now I've got the secondary nav set to top right for that.

I've got the logo set to bottom center and now I'm hoping to find a way to have the primary nav be centered and wrap around that. 

@alana

Add the following to Design > Custom CSS.

/* hide header bottom left initially while the menus are manipulated */

.ancillary-header-primary-nav-position-bottom-left.has-primary-nav [data-nc-base="header"] [data-nc-container="bottom-left"][data-nc-container] {

  display : none;
  
  }

Add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( document ).ready ( function ( ) {
  
    /*
    
      split half of primary navigation bottom left position elements into bottom
      right for v7.0 site using Brine template
      
      keep in mind that SS editor doesn't know anything about this so if you try
      to edit right bottom it's a waste of effort as far as menu items go
      
      if you put something else into the right bottom then the split part from
      the left bottom will be added
      
      */
      
    let $headerBottomLeft = $( '.Header--bottom [data-nc-container="bottom-left"]' );
    
    let $headerBottomRight = $headerBottomLeft
    
      .siblings ( '[data-nc-container="bottom-right"]' );
      
    let $nav = $( 'nav', $headerBottomLeft );
    
    let $navClone = $nav.clone ( );
    
    $headerBottomRight.append ( $navClone );
    
    let $e = $( '.Header-nav-inner', $nav ).children ( );
    
    const l = $e.length;
    
    const i = Math.ceil ( l / 2 );
    
    $e.slice ( i ).remove ( ); // remove some children from left nav
    
    $e = $( '.Header-nav-inner', $navClone ).children ( );
    
    $e.slice ( 0, i ).remove ( ); // remove some children from right nav
    
    $headerBottomLeft.css ( 'display', 'flex' );
    
    $headerBottomRight.css ( 'display', 'flex' );
    
    } );
    
  </script>

Let us know how it goes.

22 hours ago, creedon said:

@alana

Add the following to Design > Custom CSS.

/* hide header bottom left initially while the menus are manipulated */

.ancillary-header-primary-nav-position-bottom-left.has-primary-nav [data-nc-base="header"] [data-nc-container="bottom-left"][data-nc-container] {

  display: none;
  
  }

Add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    /*
    
      split half of primary navigation bottom left position elements into bottom
      right for v7.0 site using Brine template
      
      keep in mind that SS editor doesn't know anything about this so if you try
      to edit right bottom it's a waste of effort as far as menu items go
      
      if you put something else into the right bottom then the split part from
      the left bottom will be added
      
      */
      
    let $headerBottomLeft = $( '.Header--bottom [data-nc-container="bottom-left"]' );
    
    let $headerBottomRight = $headerBottomLeft
    
      .siblings ( '[data-nc-container="bottom-right"]' );
      
    let $nav = $( 'nav', $headerBottomLeft );
    
    let $navClone = $nav.clone ( );
    
    $headerBottomRight.append ( $navClone );
    
    let $e = $( '.Header-nav-inner', $nav ).children ( );
    
    const l = $e.length;
    
    const i = Math.ceil ( l / 2 );
    
    $e.slice ( i ).remove ( ); // remove some children from left nav
    
    $e = $( '.Header-nav-inner', $navClone ).children ( );
    
    $e.slice ( 0, i - 1 ).remove ( ); // remove some children from right nav
    
    $headerBottomLeft.css ( 'display', 'flex' );
    
    $headerBottomRight.css ( 'display', 'flex' );
    
    } );
    
  </script>

Let us know how it goes.

Hi @creedon, Thanks so much! I've added this in but unfortunately it didn't seem to work. This is what I'm getting:

1 hour ago, alana said:

I've added this in but unfortunately it didn't seem to work.

I've updated my code but I don't know if it will help. Please replace the code with the new code.

What I discovered is that SS is running some code after the previous code ran to build the menus. This wasn't apparent when I created the code.

Let us know how it goes.

23 hours ago, creedon said:

I've updated my code but I don't know if it will help. Please replace the code with the new code.

What I discovered is that SS is running some code after the previous code ran to build the menus. This wasn't apparent when I created the code.

Let us know how it goes.

Thanks @creedon! Just tried it and this is now what I get (keeping the primary nav position in site styles set to left):

This is what it looks like if i change the placement of primary nav to bottom right:

and this centered: 

@alana

Moving the primary navigation from the bottom left will render the code completely useless. The code, if it can work, depends on the primary navigation being bottom left. It also would work best, again, if it can work, with the bottom right not having anything assigned.

If you can set it up like it was when you made your help request, I can see if my code change made any difference.

12 minutes ago, creedon said:

@alana

Moving the primary navigation from the bottom left will render the code completely useless. The code, if it can work, depends on the primary navigation being bottom left. It also would work best, again, if it can work, with the bottom right not having anything assigned.

If you can set it up like it was when you made your help request, I can see if my code change made any difference.

Yep, It is back set up the same way as when I made my help request (bottom left primary nav, branding bottom center)

@alana

You also removed the jQuery library that the code depends on.

8 minutes ago, creedon said:

@alana

You also removed the jQuery library that the code depends on.

oh yikes..that'll do it. Just added it back in 

8 hours ago, alana said:

oh yikes..that'll do it. Just added it back in 

Hi @creedon, I think I found what I needed to change to get your code to work. I had the header layout set to stacked... so I just changed it (header:top, right layout) to horizontal instead under site styles.

It didn't work with the navigation set to bottom left, so I tried bottom right (just to see what would happen) and for some reason that worked! 

Does that look/sound right? 

Thanks so much for all your help and time btw I greatly appreciate it.

@alana

Almost there. I've updated my code with minor changes so replace what you have with it.

Also you need to go into Custom CSS and remove the following.

    .Header-nav--primary .Header-nav-item:nth-child(1) {
        display:none !important;
    }

It is interfering with the navigation menu items.

Let us know how it goes.

3 hours ago, creedon said:

@alana

Almost there. I've updated my code with minor changes so replace what you have with it.

Also you need to go into Custom CSS and remove the following.

    .Header-nav--primary .Header-nav-item:nth-child(1) {
        display:none !important;
    }

It is interfering with the navigation menu items.

Let us know how it goes.

Updated + removed! Seems to be working well. Thank you so much. 

Hey, 

I'm looking for help with splitting the navigation and placing the logo in the center. 

Here is my website: www.niksfineart.com. 

Can I please get some help, thanks in advance.

@Sanny

Did you try the instructions from the Jan. 28th post?

I'd add to those instructions. Click on the logo, the styles will change and you can select the placement for the logo.

@tuanphan Can you help me get my menu items on either side of my logo as well. 

https://bullard-tavern-pdx.squarespace.com/ Password: working

Here is a screenshot of what I want it to look like.

13 hours ago, Swebberdesign said:

@tuanphan Can you help me get my menu items on either side of my logo as well. 

 

https://bullard-tavern-pdx.squarespace.com/ Password: working

Here is a screenshot of what I want it to look like.

Add to Code Injection Header. If the code doesn't work, keep the code & let me know. We can check it again easier

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var _0x20a8=['clone','57877tMZLUc','html','786775IhrhgP','131zUKnWi','2341kluzGo','36439beuZcw','45608JVxnts','ready','200Sowgxs','.header-display-desktop\x20nav.header-nav-list','402460LNCYul','3223JsvhXV'];var _0x30aec1=_0x39be;function _0x39be(_0x222ad5,_0x201e72){return _0x39be=function(_0x20a8d8,_0x39be34){_0x20a8d8=_0x20a8d8-0x1e1;var _0x2ec001=_0x20a8[_0x20a8d8];return _0x2ec001;},_0x39be(_0x222ad5,_0x201e72);}(function(_0x169729,_0x16a9cd){var _0x37a587=_0x39be;while(!![]){try{var _0x2c2587=parseInt(_0x37a587(0x1e5))+-parseInt(_0x37a587(0x1e7))+-parseInt(_0x37a587(0x1ea))+-parseInt(_0x37a587(0x1eb))+parseInt(_0x37a587(0x1e9))*parseInt(_0x37a587(0x1ed))+-parseInt(_0x37a587(0x1e8))*-parseInt(_0x37a587(0x1e3))+parseInt(_0x37a587(0x1e2));if(_0x2c2587===_0x16a9cd)break;else _0x169729['push'](_0x169729['shift']());}catch(_0x26f68c){_0x169729['push'](_0x169729['shift']());}}}(_0x20a8,0x75a88),jQuery(document)[_0x30aec1(0x1ec)](function(_0x2f8ec0){var _0x1ed024=_0x30aec1,_0x5f2b00=_0x2f8ec0(_0x1ed024(0x1e1))[_0x1ed024(0x1e4)]();_0x2f8ec0('.header-display-desktop\x20.header-actions--right')[_0x1ed024(0x1e6)](_0x5f2b00);}));
</script>
<style>
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
</style>

It worked but I lost my button, some of them turned white and they are really far to the sides. Can you look at it again? Trying to get as close to this as possible.

18 hours ago, Swebberdesign said:

It worked but I lost my button, some of them turned white and they are really far to the sides. Can you look at it again? Trying to get as close to this as possible.

Don't remove above code & add this to Code Injection Header

<style>
  .header-nav-item a {
    color: #c59014;
}
  .header-nav-wrapper {
    text-align: right;
}
  .header-actions.header-actions--right {
    text-align: left !important;
    justify-content: flex-start;
}
</style>

Can you help me move those titles in a little closer to the logo and bring my "reserve" button back?

17 hours ago, Swebberdesign said:

Can you help me move those titles in a little closer to the logo and bring my "reserve" button back?

Remove above script/style code, I will check again

@tuanphan Could you help me with this please?
www.morrisseysofdoonbeg.ie 

3 hours ago, Niamhhi said:

@tuanphan Could you help me with this please?
www.morrisseysofdoonbeg.ie 

Hi. I see no navigation here. Can you check it again?