Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Navigation links either side of logo in site header


Recommended Posts

@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;
}

Link to comment
  • 1 month later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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. 

Link to comment

@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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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:

 

Screen Shot 2021-01-30 at 1.18.08 PM.png

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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):

704012222_ScreenShot2021-01-31at8_53_53PM.thumb.png.a9dd5575463fd38221225a74a35789e6.png

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

2028599059_ScreenShot2021-01-31at8_53_06PM.thumb.png.501bc5d858e10a79b453a44db7d3507e.png

and this centered: 

508872712_ScreenShot2021-01-31at8_53_31PM.thumb.png.0e3a62ce37810fa1695c0385be2958f7.png

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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)

Link to comment
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.

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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. 

Link to comment
  • 3 months later...

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.

Link to comment
  • 3 weeks later...
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.443860569_ScreenShot2021-06-17at8_15_34AM.thumb.png.116c93b208f6d4b5bc8d04666641c908.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.1604520611_ScreenShot2021-06-17at8_15_34AM.thumb.png.2cebfa224cfd5eb9dd0f8c02c45c997b.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...