This tutorial provides the steps to customize the hamburger menu icon in Cafe Pro to animate to a close (X) icon when tapped based on this earlier tutorial. https://sridharkatakam.com/wp-content/uploads/2018/10/cafe-pro-animated-hamburger.mp4 Step 1 Edit js/global.js. Replace $(“.responsive-menu-icon”).click(function(){ $(this).next(“.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu”).slideToggle(); }); with To view the full content, please sign up for the membership. Already a member? […]
Cafe Pro
Unboxed site-inner in Cafe Pro
This tutorial provides the CSS to make the content of inner pages (div.site-inner) in Cafe Pro full-width i.e., take up the full available width in the browser viewport. Before: After: Both Flexbox and CSS Grid based solutions are provided. Flexbox is recommended for maximum browser compatibility. CSS Grid method does not work in IE11. Tested […]
Multiple Background Images for Cafe Pro’s Front Page Header using Backstretch and Soliloquy
Updated on March 10, 2020 In the comments section of Multiple Backstretched Background Images for Front Page 1 widget area of Digital Pro via Soliloquy, a user asked: Hi,I would love to use this method to display more background images in the Cafe Pro theme. I know you have a couple of tutorials on how […]
How to show fixed background sections without text in Cafe Pro
In the StudioPress forum a user wanted to get help with a few customizations in Cafe Pro: replace site title text with a logo image display two featured posts in Front Page 1 widget area instead of a single text widget display Front Page 2 and Front Page 4 widget areas without the text appearing […]
How to set unique header images for singular pages in Cafe Pro
In Cafe Pro the image set as background in Customizer for the header will appear on inner pages as well. In this article I share the steps for using the featured images attached to Posts, Pages and other singlular entities as the background instead. If featured image is not set, bg-header.jpg in Cafe Pro’s images […]
How to move Title Area from Header to Primary Nav in Cafe Pro
A user in Genesis Slack chat asks, do you know of a âtrickâ to move the site logo from the header area to the main nav? Driving me bonkers. Yes. The trick is called output buffering. In this article I share the steps for relocating Site Title and Site Description from their default location in […]
Filterable Portfolio in Cafe Pro using Isotope
In the comments section of Filterable Portfolio in Genesis using Isotope tutorial a user asked, How can i implement this script in a widgetized home page section? (I am using cafe pro and want to have this in section 4) We can edit front-page.php in Cafe Pro and replace the code that outputs front-page-4 widget […]
How to overlay a widget area on a full width Soliloquy slider in Café Pro
In Genesis Slack chat, a user asked: I have this tutorial working great on a demo – https://sridharkatakam.com/how-to-replace-the-front-page-header-background-image-with-a-slider-in-cafe-pro/. Is it possible to use this tutorial – https://sridharkatakam.com/overlay-widget-area-full-width-soliloquy-slider-genesis/- to add a widget overlay when I have the slider in place already? In this article I show how the Header background image in front page of CafĂ© […]
How to add Buttons below Site Title and Description in Cafe Pro
In the members-only forum a user asked, I’m wondering if you could write a tutorial on adding call to action buttons underneath the site title of Cafe Pro, something similar to the front page 1 widget of Altitude Pro please? In this tutorial I show how two Call to Action buttons can be placed below […]
How to replace the Front page Header Background Image with a Slider in Café Pro
In Cafe Pro by default site title and site description appear centered on top of a big fixed background image below the Before Header section. In this tutorial I show how we can replace this background image with a slider. Live Demo Overview of the steps: Remove the front page header from automatically getting inline […]
Recent Comments