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:             
Auto-collapse sibling menus in mobile menu
See this code in use here: 
Submitted by: bobbybosler
Language: JavaScript

Adding Skew before and after section.
1 - Give sections a class name
2 - Use this code to target the class
3 - Mess with the skew to get the slant you want ***Note****
 You target the first header section with a bottom slant, then each section after with a top slant. After that change bottom: 0 to top: 0 and changed the -2.5 to 2.5 to get the back and forth slant.
See this code in use here: 
Submitted by: XAdmin
Language: CSS

Visited Accordions Colour Change when Visited
add the following code under Customizer > Custom > Global Javascript:
See this code in use here: 
Submitted by: XAdmin
Language: CSS, JavaScript

Visited Accordions Colour Change when Visited
add the following code under Customizer > Custom > Global Javascript:
See this code in use here: 
Submitted by: XAdmin
Language: CSS, JavaScript

Fade In Navigation
See this code in use here: 
Submitted by: Donald McGuinn
Language: CSS

Change width of button outlines
See this code in use here: 
Submitted by: Karen Cooper
Language: CSS

Remove the border of mobile navbar menus.
See this code in use here: 
Submitted by: dreamwebid
Language: CSS

Fixed Position Up – Down Button allowing visitors to jump automatically through sections clicking same button
Add a script to your X Theme web pages, tied to a fixed-position "down/up arrow" button, allowing the visitor to jump automatically through the sections of a long page, simply through repeated clicks of the same button? If you want this to work only on one page then add all code to the page custom CSS and JS (1) Two fixed-position buttons are created, with up and down icons. They float at the edge of the home page, on top of other content, using fixed positioning and z-index. These will need to be styled accordingly. CSS for this (added to Child Theme Styles.css)
See this code in use here: 
Submitted by: XAdmin
Language: CSS, JavaScript

Fixed Position Up – Down Button allowing visitors to jump automatically through sections clicking same button
Add a script to your X Theme web pages, tied to a fixed-position "down/up arrow" button, allowing the visitor to jump automatically through the sections of a long page, simply through repeated clicks of the same button? If you want this to work only on one page then add all code to the page custom CSS and JS (1) Two fixed-position buttons are created, with up and down icons. They float at the edge of the home page, on top of other content, using fixed positioning and z-index. These will need to be styled accordingly. CSS for this (added to Child Theme Styles.css)
See this code in use here: 
Submitted by: XAdmin
Language: CSS, JavaScript

Center Button
See this code in use here: 
Submitted by: Schauk
Language: CSS

Set Navigation Menu Break Point
Notes: Change max width as required. To center the button remove the float property. Change the block fixed width and height as required.
See this code in use here: 
Submitted by: Karen Cooper
Language: CSS

Image Hover Effect Without CSS
This jQuery javascript and html can be dropped in anywhere, it requires no css, so if you need to create an image hover effect in just a couple places on your site simply edit to match your content and insert this code. Great for custom hover social icons.
See this code in use here: 
Submitted by: Karen Cooper
Language: JavaScript