How to create a ‘fly-in’ menu button

Animations are a great way to draw attention to a call-to-action on your website. There are plugins and things that you can use to add these types of animations, but for a simple ‘fly-in’ action on a header button, a little CSS is all you need. If you’re reading this on a desktop, you’ll be able to see that the ‘shop’ button is styled differently on this site. From the home page, this button actually appears from stage left as you scroll down the page.

 

slider_button
  • Google+
  • Facebook
  • Twitter

 

As our top section is dedicated to the shop area of the site, I’ve chosen to only activate this menu item once the user intends to scroll past it. This technique uses WordPress & Divi features to achieve this effect.

Targeting the home page only

By prefixing the selector we’re about to create with the .home class, which is added to whichever page is set as home on WordPress sites, we can limit the effect to our site front.

Animation happening ‘on scroll’

Divi adds a class of .et-fixed-header to the #main-header ID on scroll. This is how you’re able to use the customizer to make your fixed header behave differently after you’ve scrolled (by default it just shrinks a bit). We can hack this feature to create ‘before-scroll’ and ‘after-scroll’ states for our button.

 

 

Creating the button styles

Use this code to create the button style on the first menu item. You can adjust the background colour and padding, but be sure to make sure your negative margin is equal to the top padding, so as not to offset any other menu items.

#main-header #et-top-navigation nav > ul > li:first-child > a {
 background: #FF9B04;
 padding: 10px 12px;
 border-radius: 4px;
 margin-top: -10px;
}

 

Before Scroll

This pushes the button to the left and makes it invisible so that when you scroll, it appears to fly in from the left.

.home #main-header #et-top-navigation nav > ul > li:first-child > a {
 margin-right: 120px;
 transition: 1s ease all;
 opacity: 0;
}

 

After Scroll

Make the button visible again and return to its original position. Note the appearence of the ‘.et-fixed-header’ class.

.home #main-header.et-fixed-header #et-top-navigation nav > ul > li:first-child > a {
 margin-right: 0;
 opacity: 1;
}

That’s it! Three cute bits of CSS to create a great menu item animation. We’ve used the first-child pseudo class to target the first item but you could easily use the menu item ID or ‘last-child’ pseudo class to come in from the other side.

Let me know in the comments if you put this to use 🙂

Previous post
Next post

9 Comments

  1. Mike

    This is very cool I’ve got a few sites in mind for this one.

    Thanks,
    Mike

    Reply
  2. sebastian brosche

    Thanks a ton, it worked immediately! Both functional and stylish. Keep em comming!

    Reply
  3. Bill

    This is Great! Thanks!

    Reply
  4. Chris

    Now this sound pretty cool.
    Since I am rather new to webdesign I need to know where to insert all of this code. Please be so nice and help me out step by step.
    Thank you very much!
    Happy Easter everyone!

    Reply
  5. Jace

    How do you alter this so that it works with Divi’s secondary menu? I tried substituting all instances of: #et-top-navigation with #et-secondary-menu but that didn’t work.

    Reply
    • Stephen

      Nice work 🙂 Glad you liked it Jeremy!

  6. Denis

    Hey Stephen ,

    How to link the button to a Bloom popup Newsletter in the same window?

    Thank you in advance

    Reply

Submit a Comment

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