Code Snippets

The quickest way to use this section is to search using a search term.

Have you contributed your favorite snippets yet? Check your submissions using the link attached to your welcome message in the header.

Snippets include php, javascript or css code to help customise your site. If you wish to add some helpful bits of code you can submit it here for review. All contributions welcome!

Language:           Keyword:             
Parallax style footer reveal effect
See this code in use here: lucidmotors.com/
Submitted by: XAdmin
Language: CSS

Hide Menu After Scrolling then Appear on Scroll Up
Add this to customizer Custom section. This is for X only. Not Pro. This will allow your header to sticky for a bit on scroll and then when scrolling back up at any point, it will reappear.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS, JavaScript

Hide Menu After Scrolling then Appear on Scroll Up
Add this to customizer Custom section. This is for X only. Not Pro. This will allow your header to sticky for a bit on scroll and then when scrolling back up at any point, it will reappear.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS, JavaScript

Remove New WooCommerce Gallery Look
This will revert your Woo Products to have the thumbnails below the main product image. Place this code in your child theme functions.php file.
See this code in use here: 
Submitted by: Donald McGuinn
Language: PHP

Remove Sub Menu Fade In and Out in Pro
This will remove the fading in and out on sub menus in Pro. Not tested in X but might work.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS

Remove hyphens from The Grid
Paste this code in the global css in The Grid skin builder
See this code in use here: 
Submitted by: Nikki Wells
Language: CSS

X Pro Cart Dropdown Mobile Fix
Using X Pro Header Builder and had a cart dropdown on the right hand side of a top bar above the main header. On mobile, 480px and down, cart was being cut off by the screen. Fixed with this snippet.
See this code in use here: 
Submitted by: matthewsparks75
Language: CSS

Navigation Background Fade
This is for a header that is transparent then fades into a solid color background on scroll.
See this code in use here: x-pro.wpdevurl.com/header-fade/
Submitted by: Donald McGuinn
Language: CSS

Contact Form 7 Horizontal W/ Flexbox
I am using it as a simple contact form on http://homepledgerealtors.com/about/ and will be using throughout the site. Here are a few of the selectors that i used. .wpcf7 .wpcf7-form .wpcf7-form-control .wpcf7-text .wpcf7-email .wpcf7-textarea .wpcf7-submit You can also add an id when setting up the form using the div tags. I believe that you can use these instead of the top to work with flexbox.
See this code in use here: 
Submitted by: JeremyBrummel
Language: CSS

Remove background image and add background color on scroll (X Pro)
Add a background image to your site using the header builder. Paste the CSS above to hide the background image on scroll and add a different color background.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS

Change Navigation Text Color on Scroll (X Pro)
This CSS will change the navigation text color on scroll for X Pro sites. Does not work on any other version.
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS