100% Responsive
Across All Devices
We take great care and attention on ensuring that Avada, the available options, Elements, and layouts will display correctly on all mobile devices. For greater flexibility, options like margins, padding, and typography responsive settings, can be adjusted throughout the site so that your content if presented nearly and pixel-perfect.
Avada’s Responsive Settings
Located inside of the Avada Global Options, responsive breakpoints can be adjusted for Blog/Portfolio grids, headers, site content, and sidebars. These settings are dynamic and allow you to decide at which point your site’s content and layouts will adjust for mobile platforms.
Mobile Friendly
There are no limitations with Avada. You have the freedom to select your site width, sidebars, and other layout sections in pixels or percentage. In conjunction with the Responsive Settings, your site’s content will automatically adapt to fit the mobile screen.
Responsive Typography
The Responsive Heading Typography option allows you to enable or disable responsiveness for all headings. This is based on a calculation of font size and screen width and is done automatically. It will ensure that your layout looks more proportionate on smaller sizes.
Mobile Visibility System
This functionality is available to use in all elements, including Containers and Columns. It allows you to choose when to display something on the page, and when to hide them. For example, if you want a section of your page to only display on mobile devices and not on desktops or tablets, then our Visibility System lets you do just that.
Responsive Sidebar Positioning
Allows you to choose the order of the main page Content, as well as the Sidebar 1 and Sidebar 2 content when viewed on a mobile device. For example, you may wish to reorder the options, so that Sidebar 1 content is always displayed above site body content or vice versa. A simple drag and drop interface allows you to achieve this.
Mobile Display Order
If you have plenty of columns on your page then you will love this feature. Now you can manage the order of every column as per your needs in each responsive mode.
Intuitive Mobile Control
Avada offers numerous intelligent options that give you control over your mobile settings. Allow default settings to work, or take over and control things exactly how you need them.
Responsive Design
Responsive is our default setting, or you can disable it to get fixed desktop mode on all screen sizes.
Fluid Site Width
Freely control site width and sidebars in both pixels and percentages, both will be fully responsive.
Responsive Sticky Header
Sticky header can be turned on or off for desktop, tablets and mobiles with individual controls.
Mobile Logo & Favicons
Avada allows you to upload a custom logo purely for mobile devices, giving you design flexibility.
Custom Breakpoints
Freely choose when elements break to the mobile layout; header, site content, and grid columns.
Page Title Bar Mobile Height
The page title bar has a separate setting to control the overall height on mobile devices.
Mobile Menu Design Style
Mobile menus have multiple design styles to choose from, allowing you freedom of choice.
Mobile Menu Item Padding
Spacing on mobile can be different, so we offer you specific menu padding for both desktop and mobile.
Mobile Menu Text Align
Your mobile menu text has separate options for text align to be left, center or right.
Mobile Menu Icons Top Margin
Depending on your logo or header height, you may need to adjust the top margin for the menu icon.
Mobile Menu Navigation Height
This setting allows you to have various design looks for the height of the mobile dropdown menu.
Mobile Menu SubMenu Indicator
Turn on to display the mobile menu sub-menu indicator: “-“.
Mobile Menu Styling Options
Avada offers numerous styling options so you can customize the mobile menu for your overall design.
Breadcrumbs on Mobile Devices
The page title bar can show or hide breadcrumbs on mobile saving you precious space.
Responsive Type
Responsive heading typography is important. Avada gives you full control over sensitivity and sizing.
CSS3 Animation Visibility
CSS3 animations are amazing, but you may not want them on mobile so you can disable them.
Sliding Bar Visibility
Sliding bar is a great tool for additional information. Easily turn it on or off for mobile.
ToTop Script Visibility
Another great feature for usability on desktop that can be turned on or off on mobile.
