Black Friday"
0
Go To Cart
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
Go To Cart Total : 0 checkout
You are here: HomeForum
Welcome, Guest
Forgot your password? Forgot your username? Create an account
SmartAddons
Joomla - Members Only
Joomla Templates
SJ WaveNews

How to add one more menu only for mobile version?..
(1 viewing) (1) Guest
Reply Topic
New Topic
  • Page:
  • 1
  • 2

TOPIC: How to add one more menu only for mobile version?..

How to add one more menu only for mobile version?.. 8 years, 10 months ago #26874

Hello I am thinking to add one more main menu which is appears only on mobile version. How I can do so. The example of what I want in attached picture.
Thank you!
Attachments:
Last Edit: 8 years, 10 months ago by tr_sa.
Reply Quote

Re: How to add one more menu only for mobile version?.. 8 years, 10 months ago #26877

  • thuyltt
Dear tr_sa,
In template, we only support one menu, you need custom code to make it.
You can submit custom work, our developer will help you custom it.

Thanks.
Reply Quote

Re: How to add one more menu only for mobile version?.. 8 years, 10 months ago #26880

What file is responsible for menu layout?.. I mean which php file in template is generating menu and slidemenu?..
Reply Quote

Re: How to add one more menu only for mobile version?.. 8 years, 10 months ago #26881

  • thuyltt
Dear tr_sa,
Please open your template folder, you can see menusys folder
and
\plugins\system\yt\includes\libs\menu folder

Thanks.
Reply Quote

Re: How to add one more menu only for mobile version?.. 8 years, 10 months ago #26903

Thank you. One more question. May I know where this part of menu code is generated?

<button class="btn-hamburger js-slideout-toggle hidden-md hidden-lg" type="button">
				<i class="fa fa-bars"></i> Menu
		</button>


and that one:


<div id="menu" class=" slideout-menu">
				<ul class="nav resmenu">
				    <li class="haveChild level1 open"><a title="Home " href="/index.php" class="active">Home </a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Home - Layout1" href="/index.php/home/home-layout1">Home - Layout1</a>        </li>
        <li><a title="Home - Layout2" href="/index.php/home/home-layout2">Home - Layout2</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level1"><a title="Explore " href="#1">Explore </a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li class="haveChild level2"><a title="Layouts" href="#1">Layouts</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="All Sidebar Blocks" href="/index.php/explore/layouts/all-sidebar-blocks">All Sidebar Blocks</a>        </li>
        <li><a title="Left Sidebar " href="/index.php/explore/layouts/left-sidebar">Left Sidebar </a>        </li>
        <li><a title="Right Sidebar " href="/index.php/explore/layouts/content-right-sidebar">Right Sidebar </a>        </li>
        <li><a title="Full Width" href="/index.php/explore/layouts/full-width">Full Width</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level2"><a title="Menu Styles" href="#1">Menu Styles</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Sider Menu" href="/index.php/explore/menu-styles/sider-menu">Sider Menu</a>        </li>
        <li><a title="Tree Menu" href="/index.php/explore/menu-styles/tree-menu">Tree Menu</a>        </li>
        <li><a title="Accordion Menu" href="/index.php/explore/menu-styles/accordion-menu">Accordion Menu</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="Extensions" href="/index.php/explore/extenstions">Extensions</a>        </li>
        <li><a title="Module Variations" href="/index.php/explore/module-variations">Module Variations</a>        </li>
        <li><a title="Module Positions" href="/index.php/explore/module-positions">Module Positions</a>        </li>
        <li class="haveChild level2"><a title="Pages " href="/index.php/explore/bonus-pages">Pages </a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li class="haveChild level3"><a title="About Page" href="/index.php/explore/bonus-pages/about-page">About Page</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="About Us" href="/index.php/explore/bonus-pages/about-page/about-us">About Us</a>        </li>
        <li><a title="About Basic" href="/index.php/explore/bonus-pages/about-page/about-basic">About Basic</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level3"><a title="Services Page" href="/index.php/explore/bonus-pages/our-services">Services Page</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Our Services 1" href="/index.php/explore/bonus-pages/our-services/our-services-layout1">Our Services 1</a>        </li>
        <li><a title="Our Services 2" href="/index.php/explore/bonus-pages/our-services/our-services-layout2">Our Services 2</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level3"><a title="Contact" href="#">Contact</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Contact - Default" href="/index.php/explore/bonus-pages/contact/contact-default">Contact - Default</a>        </li>
        <li><a title="Contact - Big Map" href="/index.php/explore/bonus-pages/contact/contact-big-map">Contact - Big Map</a>        </li>
        <li><a title="Contact - Sidebar" href="/index.php/explore/bonus-pages/contact/contact-sidebar">Contact - Sidebar</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level3"><a title="Portfolio" href="/index.php/explore/bonus-pages/portfolio">Portfolio</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Portfolio (2 columns)" href="/index.php/explore/bonus-pages/portfolio/portfolio-2-columns">Portfolio (2 columns)</a>        </li>
        <li><a title="Portfolio (3 columns)" href="/index.php/explore/bonus-pages/portfolio/portfolio-3-columns">Portfolio (3 columns)</a>        </li>
        <li><a title="Portfolio (4 columns)" href="/index.php/explore/bonus-pages/portfolio/portfolio-4-columns">Portfolio (4 columns)</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level3"><a title="Photo Gallery " href="/index.php/explore/bonus-pages/photo-gallery">Photo Gallery </a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Gallery (2 columns)" href="/index.php/explore/bonus-pages/photo-gallery/gallery-2-columns">Gallery (2 columns)</a>        </li>
        <li><a title="Gallery  (3 columns)" href="/index.php/explore/bonus-pages/photo-gallery/gallery-3-columns">Gallery  (3 columns)</a>        </li>
        <li><a title="Gallery  (4 columns)" href="/index.php/explore/bonus-pages/photo-gallery/gallery-4-columns">Gallery  (4 columns)</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="Join Now" href="/index.php/explore/bonus-pages/join-now">Join Now</a>        </li>
        <li><a title="FAQ" href="/index.php/explore/bonus-pages/faq">FAQ</a>        </li>
        <li><a title="Page 404" href="/index.php/explore/bonus-pages/page-404">Page 404</a>        </li>
        <li><a title="Privacy Policy" href="/index.php/explore/bonus-pages/testimonial2">Privacy Policy</a>        </li>
        <li><a title="Terms Of Service" href="/index.php/explore/bonus-pages/terms-of-service">Terms Of Service</a>        </li>
        <li><a title="Sitemap" href="/index.php/explore/bonus-pages/sitemap">Sitemap</a>        </li>
        <li><a title="Coming Soon" href="/index.php/explore/bonus-pages/2015-01-19-08-45-32">Coming Soon</a>        </li>
    				</ul>
				</div>
			</li>
        				</ul>
				</div>
			</li>
            <li class="haveChild level1"><a title="Joomla" href="#">Joomla</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li class="haveChild level2"><a title="Search" href="/index.php/joomla-pages-2/smart-seach">Search</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Search" href="/index.php/joomla-pages-2/smart-seach/seach">Search</a>        </li>
        <li><a title="Smart Search" href="/index.php/joomla-pages-2/smart-seach/smart-search">Smart Search</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="Login Form" href="/index.php/joomla-pages-2/login-form">Login Form</a>        </li>
        <li><a title="Page Breaks" href="/index.php/joomla-pages-2/page-break-example">Page Breaks</a>        </li>
        <li><a title="Iframe Wrapper" href="/index.php/joomla-pages-2/iframe-wrapper">Iframe Wrapper</a>        </li>
        <li class="haveChild level2"><a title="Blog Content" href="/index.php/joomla-pages-2/blog-joomla-2">Blog Content</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="List All Categories" href="/index.php/joomla-pages-2/blog-joomla-2/list-all-categories">List All Categories</a>        </li>
        <li><a title="Featured Articles" href="/index.php/joomla-pages-2/blog-joomla-2/featured-articles">Featured Articles</a>        </li>
        <li><a title="Category List" href="/index.php/joomla-pages-2/blog-joomla-2/category-list">Category List</a>        </li>
        <li class="haveChild level3"><a title="Category Blog" href="/index.php/joomla-pages-2/blog-joomla-2/category-blog">Category Blog</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Listing " href="/index.php/joomla-pages-2/blog-joomla-2/category-blog/listing">Listing </a>        </li>
        <li><a title="Grid" href="/index.php/joomla-pages-2/blog-joomla-2/category-blog/grid">Grid</a>        </li>
    				</ul>
				</div>
			</li>
            <li class="haveChild level3"><a title="Category Tag" href="/index.php/joomla-pages-2/blog-joomla-2/tags">Category Tag</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Compact List Of Tagged Items" href="/index.php/joomla-pages-2/blog-joomla-2/tags/compact-list-of-tagged-items">Compact List Of Tagged Items</a>        </li>
        <li><a title="List Of All Tags" href="/index.php/joomla-pages-2/blog-joomla-2/tags/list-of-all-tags">List Of All Tags</a>        </li>
        <li><a title="Tagged Items" href="/index.php/joomla-pages-2/blog-joomla-2/tags/tagged-items">Tagged Items</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="Single Article" href="/index.php/joomla-pages-2/blog-joomla-2/single-article">Single Article</a>        </li>
    				</ul>
				</div>
			</li>
        				</ul>
				</div>
			</li>
            <li class="haveChild level1"><a title="K2" href="/index.php/k2">K2</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li class="haveChild level2"><a title="K2 Article" href="/index.php/k2/k2-article">K2 Article</a>							<span class="menuress-toggle"></span>
            				<div class="res-wrapnav">
				<ul class="nav">
			    <li><a title="Article Show Images" href="/index.php/k2/k2-article/article-show-images">Article Show Images</a>        </li>
        <li><a title="Article Show Youtube" href="/index.php/k2/k2-article/article-show-youtube">Article Show Youtube</a>        </li>
        <li><a title="Article Show Vimeo" href="/index.php/k2/k2-article/article-show-vimeo">Article Show Vimeo</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="K2 Tags" href="/index.php/k2/k2-tags">K2 Tags</a>        </li>
        <li><a title="K2 User" href="/index.php/k2/k2-user">K2 User</a>        </li>
        <li><a title="K2 Listing" href="/index.php/k2/k2-listing">K2 Listing</a>        </li>
    				</ul>
				</div>
			</li>
            <li><a title="Shortcodes " href="/index.php/short-codes">Shortcodes </a>        </li>
        <li><a title="Mega1" href="#">Mega1</a>        </li>
        <li><a title="Mega2" href="#">Mega2</a>        </li>
    				</ul>
			
			
		</div>
Last Edit: 8 years, 10 months ago by tr_sa.
Reply Quote

Re: How to add one more menu only for mobile version?.. 8 years, 10 months ago #26993

  • thuyltt
Dear tr_sa,
Code:
<button class="btn-hamburger js-slideout-toggle hidden-md hidden-lg" type="button">
<i class="fa fa-bars"></i> Menu
</button>
This is menu button in mobile.

Other code which you sent is HTML code of menu.
Besides, you need use js code and css code so that menu can work.

Thanks.
Reply Quote
Reply Topic
New Topic
  • Page:
  • 1
  • 2
SmartAddons
Joomla - Members Only
Joomla Templates
SJ WaveNews
Powered by Kunena
Time to create page: 0.23 seconds
Xtore Opencat Theme

Notification

Please find your issue via Suggested Posts before submitting your question. We have solved the most of issues and maybe your issue was solved before.
TigerHostings - WordPress Hosting Service
eMarket - Multipurpose MarketPlace OpenCart 4 Theme

Latest My Topics

No posts to display.

More Topics »

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
0
Go To Cart
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
Go To Cart Total : 0 checkout
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes