MaxxFitnes Template have a minimal, creative and responsive HTML5 offline page. Select how to display offline page in theme settings. Use one of the modes: Offline page or GrandOpening page (Coming Soon).

Main Features Ofline page

• Two modes: Offline page, Coming Soon page
• Clean and minimal design
• Fully Responsive
• jQuery Countdown for Coming Soon page
• Easy to customise
• 600+ Google Fonts
• W3C Valid HTML
• Well documented PHP and LESS files
• and more features...

MaxxFitnes Template Customizer allow create your own style. You can pick colors, modify sizes, select fonts and much more with a real time theme preview. We added 4 amazing color styles. And you can build your own color style just a minutes!

MaxxFitness template comes with a sophisticated layout system to create any kind of sidebar or widget layout based on Warp Framework. You can easily manage the sidebar's positions and modules in the theme administration. Modules can have different styles and be placed in any position offered by this theme. Each position has its own layout. You can align modules side-by-side, stack them or choose your own grid layout. Show or hide modules on mobile devices, while the grid adapts perfectly to your layout.

Defines different styles for the navigation bar.

Usage

The Navbar component consists of the navbar itself and one or more navigations.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="">...</a></li>
        <li><a href="">...</a></li>
        <li class="uk-parent"><a href="">...</a></li>
    </ul>
</nav>

---

Navbar flip

Add the .uk-navbar-flip class to a <div> element to group and align navigations and items to the right.

Example

Markup

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
            <li><a href="">...</a></li>
        </ul>
    </div>
</nav>

---

Navbar subtitle

Add the .uk-navbar-nav-subtitle class to an <a> element in the list item to indicate that it has a subtitle. Use a <div> element for the subtitle itself.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li><a href="" class="uk-navbar-nav-subtitle">
            ...
            <div>...</div>
        </a></li>
    </ul>
</nav>

---

Content

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

Example

Markup

<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

---

Responsive visibility

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

Example

Resize your browser window to see it in action.

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav uk-hidden-small">...</ul>
    <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>

<div id="my-id" class="uk-offcanvas">
    ...
</div>

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.

---

Modifiers

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

Navbar attached

Add the .uk-navbar-attached class to optimize the navbar's styling to be attached to the top of the viewport. For example, rounded corners will be removed.

Example

Markup

<nav class="uk-navbar uk-navbar-attached">...</nav>

---

Navbar with dropdowns

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-dropdown-navbar modifier to the dropdown, so it fits perfectly into the navbar's styling.

Example

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Example

Click on any of the boxes to see the animation.

Markup

<div class="uk-animation-fade">...</div>

---

Reverse modifier

By default, all aimations are incoming. To reverse any animation, add the .uk-animation-reverse class.

Example

Click on any of the boxes to see the animation.

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

---

Duration modifier

To stretch the animation duration to 15 seconds, add the .uk-animation-15 class.

Example

Markup

<div class="uk-animation-slide-right uk-animation-15">...</div>

---

Origin modifier

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Example

Click on any of the boxes to see the animation.

---

Animation hover

To trigger an animation on hover, just add the .uk-animation-hover class to the animated element itself or to a container.

Example

Markup

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>