Hot Themes
  • Joomla!
    • Joomla Templates
    • Sparky Page Builder
    • Sparky Framework
    • Joomla Extensions
    • Free Joomla Extensions
    • Templates Demo
  • WordPress
    • WordPress Themes
    • WordPress Plugins
    • Themes Demo
  • Services
    • Website Maintenance
    • Convert Design to Website
    • Upgrading Joomla
    • Web Hosting
    • Custom Work
  • About
    • About Us
    • Blog
    • Affiliate Program
    • Careers
    • Why HotThemes?
  • Help
    • How to Download?
    • Joomla Documentation
    • WordPress Documentation
    • FAQ
    • Support Forum
    • Contact Us
  • Members
    • Log In
  • Search
  • Join Now

VII Responsive

To access the Sparky’s template options and open the Responsive tab, do the following:

  1. Login to your Joomla Administration panel.
  2. Go to Extensions > Templates > sparky_framework > Responsive (Joomla 3.x) or System > Templates > Site Template Styles > sparky_framework > Responsive (Joomla 4.x).

Responsive Tab

Responsive web design is considered as a good practice in modern web design. It allows your site to adopt its layout accordingly to the available space on screen. Therefore, websites have different layouts on small smartphone screens and on big desktop monitors.

In responsive web design, it’s recommended to use relative units (em, rem, vw, vh and %) because they are relative to the screen size. However, many developers still prefer to use pixels even in the responsive web design era. Which units you would use, depends on your preference. The Sparky Framework allows you to select any of these units when you are building your site.

The Sparky Framework is fully responsive! The layout you are building in the Layout tab will be displayed differently on mobile devices. Screen widths when the layout is changing are known as breakpoints in responsive web design theory. The Sparky Framework uses similar breakpoints as Bootstrap. This is an explanation of how it works in practice:

  • If visitor’s screen width is larger than value of the Template Width parameter from the Layout tab, then your site will have the width given in this parameter. All elements of your layout will be positioned as it’s defined in the Layout Builder.
  • If visitor’s screen width is less than value of the Template Width parameter from the Layout tab, and it’s not less than 990 pixels, then width of your site will be reduced to 960 pixels. All elements of your layout will be positioned as it’s defined in the Layout Builder. However, the widths of the elements will be reduced proportionally, so they can fit in the reduced width of the site.
  • If visitor’s screen width is between 768 and 990 pixels, width of your site will be reduced to 750 pixels. All elements of your layout will be positioned as it’s defined in the Layout Builder. However, the widths of the elements will be reduced proportionally, so they can fit in the reduced width of the site.
  • If visitor’s screen width is 767 pixels or less, width of your site will be set to 100%. It will be equal to the width of the visitor’s screen. All elements of your layout will also have width of 100% (less paddings). So, if you had a row with 3 elements, all these elements will be stacked vertically. You can avoid this for a particular row if you enable the No Collapse on Small Screens parameter in settings for this row in the Layout Builder (read more about it in the Layout section).

The Responsive tab has just a few parameters. But, the main part of the action is actually “under the hood”, as we explained above. Let’s explain the parameters available in the Responsive tab.

Responsive Layout parameter is enabled by default. If it’s disabled, your website will not be responsive anymore and it will have the same layout, regardless of the visitor’s screen size.

Responsive Menu parameter is also enabled by default. If your menu is either of Drop-down, Mega or Horizontal type, then it will be converted to a button (also known as “hamburger” menu) on smaller screens. When visitor taps on the button, the menu will appear, but differently formatted and easier for navigation on mobile devices with touch screens.

By default, the responsive menu stays open when the user clicks a menu item. If you want a menu item to close the menu after clicking, set the Link Class value to "closeNav" for this menu item (this parameter is under the Link Type tab of the menu item parameters).

Use Icon On Screen Width parameter allows you to set the maximum screen width when the menu is converted to a button (“hamburger” menu). If screen width is higher than value in this parameter, a normal menu output will be used.

Finally, the Menu Icon Image parameter allows you to select a file that will be used for the menu button (when it’s converted to button). All images from this folder are listed:

/media/templates/site/sparky_framework/images

To add your own image, upload the image file there using your FTP client.

Sample

Responsive Template Sample

Different layout on different screen sizes when Responsive options are enabled. This sample is from Plumber template. This template is available for all premium members.

Documentation Menu

  • I About Sparky Framework
  • II Installation
  • III Layout
  • IV Style
  • V Features
  • VI Menus
  • VII Responsive
  • VIII Custom CSS and JavaScript
  • IX Export
  • X Plugins
  • XI Download
  • XII FAQs

We have 110+ templates in our collection. View all Joomla Templates

Join thousands of members who are using our products to make awesome Joomla site, blog or eCommerce. We have a big collection and publish new products regularly.

7 Days Money Back Guarantee, so all purchases are risk-free! Read terms

Sign Up Now
Get all-inclusive download access
  1. You are here:  
  2. Home
  3. Documentation
  4. VII Responsive

Latest Templates

  • Cats Joomla Template
  • Barber Joomla Template
  • Telehealth Joomla Template
  • Spa Joomla Template
  • Writer Joomla Template

Latest Extensions

  • Hot Simple Contact — Joomla Contact Form Module
  • Hot Image Scroller — 100% CSS-based
  • Elastic Slider - Joomla 4 Compatible
  • Hot Swipe Carousel - Touch Friendly Carousel
  • Hot Counters - Countdown Joomla Module

Connect With Us

Subscribe to Mailing List

© 2009-2025 Hot Themes - templates and extensions provider. All rights reserved.
hotjoomlatemplates.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
Terms of Service | Privacy Policy | Affiliate Program