Platform 5: Menu Color Transition On Scroll

Greetings,

For this weeks tutorial  we are going to recreate the look and feel of a menu bar going  from transparent to a solid color. You can see the demo here.

To get this to work we will be using jQuery along with some CSS to make the magic happen.

So lets begin.

So first we need to get our sections laid out properly before we can start doing any positioning with margins and such. So add a MegaNav and a container with a elements section in it to the page. Make sure the nav  is on top.

Also give the MegaNav a custom class custom-nav (or what ever you like it to be).

Next we need to select the sticky option in the MegaNav so that the menu will always be visible and add a background image to the container. I added a (vw) of 30 to that container but you can add what ever you see fit.

Don't bother trying to add negative margins with the sliders we are going to do all that with CSS so we can have more control over what it looks like.

The fun stuff starts here.

The goal is to control when the menu background changes color as the user scrolls down the page. So in order for this to work we need to leave all the sliders for the menu at their defaults.

So I am going to show you the CSS and then explain it to you.

For the most part we are going to writing most of our CSS under a media query so that we can control what it looks like on desktop vs. mobile.

@media (min-width:768px) {
#container_u4cdkwy {
margin: -6% 0 0 0;
}
.custom-nav {
color:white;
transition: all 200ms ease 0ms;
}
}

The above tells the browser to only apply these styles if the media width is greater than 768px.

So what we are doing is adding some negative margin to the container containing the elements section so that it will appear that the menu is sitting on top of it. The custom class you added (in this case is custom-nav) will control how the transitions and the color of the text will look before the user scrolls down.

Note that you may need to play with the negative margin depending on your project.

Remember to use your own section id's and classes

.scroll {
color: black!important;
background: white;
box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.3);
}

This bit of CSS will control what the menu looks like after the user scroll down the page.

So when the user scrolls down the page multiple things are going to happen.

  1. The text will turn to black.
  2. The background will turn to white with a bottom box shadow.

Now for the awesomeness of jQuery

For this to work as planned we are going to need the help of jQuery to bring it all together. Here is the tiny bit of script we will be using.

<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {

var xs = $('#meganav_ujlugqo')

// this will stop the script from running on mobiles
if ( $(window).width() > 768) {

//this tells the script to wait till the user scrolls more than 100px
if ($(window).scrollTop() >= 100) {

//when the user scrolls the menu shrinks and add the class of menu-shadow
xs.addClass("scroll");

} else {
// user scrolls back up and things go back to normal
xs.removeClass("scroll");
}
}
});
});
</script>

The script is pretty basic I don't see a need to explain it but if you have questions feel free to post in the comments.

Where do I include this script in Platform 5

To add this script to your site navigate to your dashboard >pagelines > settings >advanced and you should see something similar to this.

iheart pagelines

Just copy and paste the script above it is already wrapped in script tags so you are good to go.

If you have done everything correctly then your finished project should look similar to the demo. Please note that your end result may look different from mine if you have more margin or a larger menu so my advice is to just play around with it be creative and try something new.

Alright guys I hope you enjoyed this tutorial as always be sure to share and  Like Us On Facebook .

~Aires

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Platform 5: Menu Color Transition On Scroll"

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

Platform 5: Menu Color Transition On Scroll

Published on by | 2 Comments

Greetings,

For this weeks tutorial  we are going to recreate the look and feel of a menu bar going  from transparent to a solid color. You can see the demo here.

To get this to work we will be using jQuery along with some CSS to make the magic happen.

So lets begin.

So first we need to get our sections laid out properly before we can start doing any positioning with margins and such. So add a MegaNav and a container with a elements section in it to the page. Make sure the nav  is on top.

Also give the MegaNav a custom class custom-nav (or what ever you like it to be).

Next we need to select the sticky option in the MegaNav so that the menu will always be visible and add a background image to the container. I added a (vw) of 30 to that container but you can add what ever you see fit.

Don't bother trying to add negative margins with the sliders we are going to do all that with CSS so we can have more control over what it looks like.

The fun stuff starts here.

The goal is to control when the menu background changes color as the user scrolls down the page. So in order for this to work we need to leave all the sliders for the menu at their defaults.

So I am going to show you the CSS and then explain it to you.

For the most part we are going to writing most of our CSS under a media query so that we can control what it looks like on desktop vs. mobile.

@media (min-width:768px) {
#container_u4cdkwy {
margin: -6% 0 0 0;
}
.custom-nav {
color:white;
transition: all 200ms ease 0ms;
}
}

The above tells the browser to only apply these styles if the media width is greater than 768px.

So what we are doing is adding some negative margin to the container containing the elements section so that it will appear that the menu is sitting on top of it. The custom class you added (in this case is custom-nav) will control how the transitions and the color of the text will look before the user scrolls down.

Note that you may need to play with the negative margin depending on your project.

Remember to use your own section id's and classes

.scroll {
color: black!important;
background: white;
box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.3);
}

This bit of CSS will control what the menu looks like after the user scroll down the page.

So when the user scrolls down the page multiple things are going to happen.

  1. The text will turn to black.
  2. The background will turn to white with a bottom box shadow.

Now for the awesomeness of jQuery

For this to work as planned we are going to need the help of jQuery to bring it all together. Here is the tiny bit of script we will be using.

<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {

var xs = $('#meganav_ujlugqo')

// this will stop the script from running on mobiles
if ( $(window).width() > 768) {

//this tells the script to wait till the user scrolls more than 100px
if ($(window).scrollTop() >= 100) {

//when the user scrolls the menu shrinks and add the class of menu-shadow
xs.addClass("scroll");

} else {
// user scrolls back up and things go back to normal
xs.removeClass("scroll");
}
}
});
});
</script>

The script is pretty basic I don't see a need to explain it but if you have questions feel free to post in the comments.

Where do I include this script in Platform 5

To add this script to your site navigate to your dashboard >pagelines > settings >advanced and you should see something similar to this.

iheart pagelines

Just copy and paste the script above it is already wrapped in script tags so you are good to go.

If you have done everything correctly then your finished project should look similar to the demo. Please note that your end result may look different from mine if you have more margin or a larger menu so my advice is to just play around with it be creative and try something new.

Alright guys I hope you enjoyed this tutorial as always be sure to share and  Like Us On Facebook .

~Aires

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Platform 5: Menu Color Transition On Scroll"

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match