#1. Add an off canvas element in the Pro Header or the content area of the page. #2. Add an ID to the element which we will use to target the element with Javascript later. NOTE: Once you have added an ID to the Content Area Off Canvas element, the ID automatically gets appended with some standard identifier which is …
Add a Gap in Mobile Between Columns on X/Pro Theme
Issue: Solution 1. Add this CSS to each column’s Element CSS: Solution 2. Set a class to the row that contains the columns then add a CSS code targetting the columns using the class added the row like this: The code above will add a bottom margin to the columns on mobile if the class gap-mobile is added to the …
Add Excerpt to Recent Posts Element of X Theme
As of X 6.1.6, the Classic Recent Post element still do not have the built-in option to include the excerpt text of the posts. To do that, add this code to the functions.php file of the child theme: To further style the excerpts, you may start with this CSS code which may be placed in the Global CSS of the …
X Theme – Transparent Fixed Top Header (Solid Background on Scroll)
As of X Theme version 6.1.3, there is still no option to have a fixed header on top of the hero image on the page and change its background color to a solid or semi-transparent color as you scroll through the page. As an alternative, you can do by doing the following: Firstly, go to X > Theme Options > …
Change X Theme’s Header Breakpoint
By default, X’s mobile menu displays on 980px breakpoint. There is no available option to change this but some lines of custom CSS can override the default theme CSS. The code above will display X’s menu navigation from 1080px screen width and below.
X Theme Portfolio Page Setup
If you have created page in X Theme and set the page template to Layout – Portfolio and there are no items showing up when you view the page in the frontend, simply edit the page again and a new metabox panel called Portfolio Settings will be available in the edit page area which you can find below the slider …