Update on January 12, 2020: Follow the updated tutorial here instead. Slideout.js is a touch slideout navigation menu for mobile web apps. In this tutorial, I share the steps to display a hamburger menu icon at smaller widths which when clicked/tapped will slide out the widgets placed in a widget area from the side of […]
Search Results for: touch
Full-Screen Pushing Navigation in Genesis
This tutorial provides the steps for implementing Full-Screen Pushing Navigation by CodyHouse in Genesis. We shall remove the primary navigation menu from its default location (below header) and show it inside the full screen overlay. On the right side of the nav menu will be a custom widget area. Screencast: Screenshots: When the menu icon […]
Smooth Scrolling, Highlighted Link and Fixed Side Navigation in Genesis using Page scroll to id and Sticky-Kit
In the members-only forum a user asked: Trying to achieve what this tutorial outlines. http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation Here is an example of it in the wild. http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation It’s a really effective for pages with long content in regards to aiding page navigation. I would love to see a tutorial from you about this! In this article we […]
Responsive side menu with search form in Genesis using Font Awesome and Sidr in Genesis
In the comments section of Adding a responsive side menu in Genesis using Sidr a user wanted to know how a search form can be shown in the side menu with the Submit button replaced by a Font Awesome icon. In this tutorial I share the steps for adding a search form floated to the right of Primary Navigation […]
Reply To: add nice thumbnail with mouseover overlays to woocommerce shop page
one last tiny request that will give the presentation of products a nice touch … for the thumbnails, on mouseover can we have them fade in? i know how to do this with CSS myself, but i thought you might want to include this for other people thanks Sridhar! i truly appreciate what you do
Full Screen Scrolling Sections in Genesis using PagePiling.js
PagePiling.js is a jQuery script for easily creating fullscreen sections that scroll one at a time for effective and engaging story telling. In this tutorial I provide details of implementing PagePiling on the front page of a Genesis site having 4 widget areas. We are going to set image backgrounds for first and third sections […]
Video background section in Dynamik
In the comments section of How to replace Home Section 1’s Parallax Image Background with Video Background using BigVideo.js, Andrew writes, Hi Sridhar , I’ve managed to adapt this tutorial to work with Dynamik for Genesis , I changed the enque’s code , created directories in Dynamik Uploads folder for the JS and Video files […]
Reply To: Full background video on Altitude
I am in touch with MemberPress support about the same. They asked me to try a beta version of the plugin. I did and still no dice. In the meantime, I am going to refund your $10 and after that you sign up for Tutorials Access again. Let’s continue in email.
How to display Excerpts as mouse following tooltips for Featured Images in Portfolio Archive in Genesis
In this article I share how excerpts can be shown in a tooltip when mouse is placed on featured images for entries in the Portfolio archive page of Minimum Pro. We shall use PowerTip for the tooltips and write a small custom JS that will pluck the excerpt text, place it in a variable, hide […]
How to fade in last sidebar widget as it is scrolled to and make it fixed in Genesis
Andrea asked, @srikat Any chance of a tutorial? Client wants bottom sidebar widget to fade in and stick like on Pat Flynn’s blog: http://t.co/5leVweR1zI— Andrea Whitmer (@awhitmer83) January 30, 2014 In this post I am going to share a way of doing this using Waypoints, Animate.CSS and StickyJS. Here’s the overall flow: Opacity of the […]
Recent Comments