alana

4 hours ago, tuanphan said:

Add this code to bottom of Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .test-something .burger-inner>div {
    background-color: #746837 !important;
}
</style>

 

Amazing! Worked perfectly. @tuanphan thank you so much!

Hi @tuanphan!

I have a similar issue that I'm looking to resolve. I've got a custom hamburger menu on a 7.1 site here:

https://www.esplanadewakefield.ca/?password=demo
Password = demo

Looking to find a way to change the colour of the hamburger menu on scroll and have it stay fixed (Like I have setup for the logo.) The white works for the first section but need it to be this green #746837 for the rest. 

Any chance you'd be able to help with a solution? Many thanks! 

Alana

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. 

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.

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 

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)

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: 

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:

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. 

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.