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.

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