<p>All JoomlaShine templates come with a responsive design to make sure that your website will look beautiful not only on all major web browsers but also on mobile devices.</p>
<div>
<p>We also offer a mobile version of the main menu to enhance the mobile user experience. There are 4 types of mobile menu to choose simply by a few clicks via administrator:</p>
<h3>Sticky Mobile Menu</h3>
<p>Sticky mobile menu allows your users landing on your site using a mobile device easily access to your menu from anywhere on the website, without having to scroll back to the top of the page. By default, sticky menu is automatically enabled for both mobile and desktop devices in Menu &amp; Site Tools section.</p>
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/sticky-mobile-menu.png" alt="Sticky Mobile Menu" /></p>
<hr class="line-dots" />
<h3>Default Mobile Menu</h3>
<p>This is the default mobile menu style showing the menu in full-width form under the toolbar.</p>
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/mobile-push-default.png" alt="Default Mobile Menu" /></p>
<hr class="line-dots" />
<h3>Mobile Menu with Push Effect</h3>
<p>The mobile menu will appear from the left/right while website content will be pushed to the same direction.</p>
<div class="grid-layout grid-layout2 clearafter">
<div class="grid-col" style="width: 45%; display: inline-block;">
<div class="grid-col_inner">
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/mobile-push-right.png" alt="Push Right" /></p>
<p align="center"><em>Push Right</em></p>
</div>
</div>
<div class="grid-col grid-lastcol" style="width: 45%; display: inline-block;">
<div class="grid-col_inner">
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/mobile-push-left.png" alt="Push Left" /></p>
<p align="center"><em>Push Left</em></p>
</div>
</div>
</div>
<hr class="line-dots" />
<h3>Mobile Menu with Slide Effect</h3>
<p>The mobile menu will slide in from the left/right and overlap website content.</p>
<div class="grid-layout grid-layout2 clearafter">
<div class="grid-col" style="width: 45%; display: inline-block;">
<div class="grid-col_inner">
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/mobile-slide-right.png" alt="Slide Right" /></p>
<p align="center"><em>Slide Right</em></p>
</div>
</div>
<div class="grid-col grid-lastcol" style="width: 45%; display: inline-block;">
<div class="grid-col_inner">
<p align="center"><img class="image-border" src="images/content/template-details/menu-styles/mobile-menu/mobile-slide-left.png" alt="Slide Left" /></p>
<p align="center"><em>Slide Left</em></p>
</div>
</div>
</div>
</div>