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

Make a sticky menu with Basil template

Question

12 answers to this question

Recommended Posts

  • 0

Thank you, it works, but how could it be possible to make the sticky menu with a white background, black font and little bit smaller than the "normal" menu?

Share this post


Link to post
  • 0
2 minutes ago, mtaddict said:

Thank you, it works, but how could it be possible to make the sticky menu with a white background, black font and little bit smaller than the "normal" menu?

It needs JavaScript. Which plan do you use? Personal or Ecommerce?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

next, add this to Home > Design > custom CSS

/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
On 4/25/2020 at 10:17 AM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

next, add this to Home > Design > custom CSS


/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

 

That doesn't work properly, please check the website: 

https://bisourouen.squarespace.com/

Website Password: lachose

Share this post


Link to post
  • 0
5 hours ago, tuanphan said:

Seems fine here. Did you solve?

Not at all... You don't see it doesn't work? 😕

Share this post


Link to post
  • 0
On 5/3/2020 at 2:20 AM, mtaddict said:

Not at all... You don't see it doesn't work? 😕

Add to Code Injection Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
</style>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
On 5/5/2020 at 2:11 PM, tuanphan said:

Add to Code Injection Header


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
</style>

 

Hello, I putted this in the header injection code section, and my custom css is 

header.Header.Header--bottom.Header--overlay {
    position: -webkit-sticky;
    position: sticky;
}

/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

but as you can see, that doesn't work properly... a lot of bugs...

Site URL: https://bisourouen.squarespace.com/

Website Password: lachose

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...