How to relatively easy make Mega Menu with Themler

Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

Dont be discouraged by at first sight complicated steps. You will be doing it just once per website (one Megamenu)
If you have questions just name number of step.

I tried many, many ways to call PHP templates. All works, but "query_posts" and category is the only way giving you chance to edit submenus directly in Themler, without switching Themler templates all the time.

  1. Make one new post category
  2. Name it for instance "Menu Items Category".
  3. Make one new Post, name it for instance "Menu Item 1" (You can use real names of your menu items, but I would not advise to not cofuse them with already existing Pages)
  4. Make visibility for Post - Private. Post will NOT have any content.

  5. Make one new custom Themler template

  6. Name it Menu Item 1 (it will be more, depending how your menu is build, so stick to number orders)
  7. Click on all 3 instances for "Customize template style" (important)
  8. Disable header and footer for this custom template (important)
  9. Remove all Post controls from template (or leave them if it is something specific you are showing in Megamenu)
  10. Set other options, disable pagination, etc. (You can do all this later from Home template directly, That is the point of all this)

  11. Go to the Home template and insert new CMS Code Control.

  12. Inside insert theese snippets for PHP/HTML and CSS. Theese are starter snippets, edit them with some code editor after wish and need. Work as it is. (code at the bottom of comment)
  13. Copy CMS control and Paste link on all templates you will they be shared (I guess as it is Megamenu it will be all templates. Skip your custom templates for Menu Items, important)
  14. Save all and now you can directly click on all megamenu Items and edit submenu directly on Home template, with Themler. Open Megamenu items with right click on it and Open link. Insert all controls, widgets, HTML, maps, login, search widgets, insert rows and decide in how many columns content of submenu will show. It is up to you, no limits.

  15. Repeat process depending how many menu items you have. (New post, new Themler custom template, only one category dont make new)

In CMS code I set only for first menu item, adapt it. "'cat'=> 82," is your "Menu Items Category" ID. Find it yourself in backend. it is same category for all Menu Items, no need to change that in code.
"theme_blog_15();" is your Themler template for this specific menu item. You will find in theme root files of your menu items templates. open them and inside you can read this code "theme_blog_15();". Just adapt numers, nothing else.

Dont be discouraged by at first sight complicated steps. You will be doing it just once per website (one Megamenu) If you have questions just name number of step. I tried many, many ways to call PHP templates. All works, but "query_posts" and category is the only way giving you chance to edit submenus directly in Themler, without switching Themler templates all the time. 1. Make one new post category 2. Name it for instance "Menu Items Category". 3. Make one new Post, name it for instance "Menu Item 1" (You can use real names of your menu items, but I would not advise to not cofuse them with already existing Pages) 4. Make visibility for Post - Private. Post will NOT have any content. 5. Make one new custom Themler template 6. Name it Menu Item 1 (it will be more, depending how your menu is build, so stick to number orders) 7. Click on all 3 instances for "Customize template style" (important) 8. Disable header and footer for this custom template (important) 9. Remove all Post controls from template (or leave them if it is something specific you are showing in Megamenu) 10. Set other options, disable pagination, etc. (You can do all this later from Home template directly, That is the point of all this) 11. Go to the Home template and insert new CMS Code Control. 12. Inside insert theese snippets for PHP/HTML and CSS. Theese are starter snippets, edit them with some code editor after wish and need. Work as it is. (code at the bottom of comment) 13. Copy CMS control and Paste link on all templates you will they be shared (I guess as it is Megamenu it will be all templates. Skip your custom templates for Menu Items, important) 14. Save all and now you can directly click on all megamenu Items and edit submenu directly on Home template, with Themler. Open Megamenu items with right click on it and Open link. Insert all controls, widgets, HTML, maps, login, search widgets, insert rows and decide in how many columns content of submenu will show. It is up to you, no limits. 15. Repeat process depending how many menu items you have. (New post, new Themler custom template, only one category dont make new) In CMS code I set only for first menu item, adapt it. "'cat'=> 82," is your "Menu Items Category" ID. Find it yourself in backend. it is same category for all Menu Items, no need to change that in code. "theme_blog_15();" is your Themler template for this specific menu item. You will find in theme root files of your menu items templates. open them and inside you can read this code "theme_blog_15();". Just adapt numers, nothing else.
Vote to pay developers attention to this features or issue.
24 Comments
Order By: Standard | Newest
Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

CMS Code control PHP/HTML code:

<div class="container">
<nav class="navbar navbar-default">

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 1 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'cat'=> 82,
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'cat'=> 82,
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>
</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 3 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'cat'=> 82,
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>

</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 4 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'cat'=> 82,
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 5 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'cat'=> 82,
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>

CMS Code control PHP/HTML code: &lt;div class="container"&gt; &lt;nav class="navbar navbar-default"&gt; &lt;div class="collapse navbar-collapse js-navbar-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 1 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'cat'=&gt; 82, 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 2 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'cat'=&gt; 82, 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 3 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'cat'=&gt; 82, 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 4 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'cat'=&gt; 82, 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 5 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'cat'=&gt; 82, 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /.nav-collapse --&gt; &lt;/nav&gt; &lt;/div&gt;

Last edited 19 January 2016 by Stagger Lee

Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

CMS Code control CSS code:

.navbar.navbar-default {
  width: 100%;
  margin: 0 auto;
  background: #555;
  border: 0;
  border-radius: 0;
}


.navbar-nav>li>.dropdown-menu {
  margin-top: 0px;
  border-top: 0px;
}


.navbar-default .navbar-nav>li>a {
  width: 200px;
  font-weight: bold;
}


.mega-dropdown { position: static !important;/*width:100%;*/


}


.mega-dropdown-menu {
  padding: 20px;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
}


.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}


.mega-dropdown-menu > li > ul > li { list-style: none; }


.mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #999;
  white-space: normal;
}


.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
  color: #444;
  background-color: #f5f5f5;
}


.mega-dropdown-menu .dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight: bold;
}


.mega-dropdown-menu form { margin: 3px 20px; }


.mega-dropdown-menu .form-group { margin-bottom: 3px; }


.dropdown.mega-dropdown:hover > .dropdown-menu.mega-dropdown-menu.row { display: block; }


.navbar-default .navbar-nav>li>a { color: #fff; }


.navbar-default .navbar-nav>li>a:hover {
  color: #000;
  background: #fff;
}


.dropdown-menu.mega-dropdown-menu.row li:hover {
  background: #fff;
}


.megamenu-headline { padding: 0 32px; }

CMS Code control CSS code: .navbar.navbar-default { width: 100%; margin: 0 auto; background: #555; border: 0; border-radius: 0; } .navbar-nav>li>.dropdown-menu { margin-top: 0px; border-top: 0px; } .navbar-default .navbar-nav>li>a { width: 200px; font-weight: bold; } .mega-dropdown { position: static !important;/*width:100%;*/ } .mega-dropdown-menu { padding: 20px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight: bold; } .mega-dropdown-menu form { margin: 3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; } .dropdown.mega-dropdown:hover > .dropdown-menu.mega-dropdown-menu.row { display: block; } .navbar-default .navbar-nav>li>a { color: #fff; } .navbar-default .navbar-nav>li>a:hover { color: #000; background: #fff; } .dropdown-menu.mega-dropdown-menu.row li:hover { background: #fff; } .megamenu-headline { padding: 0 32px; }
Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

Change span classes for glyphicons with Themler icons codes. Had no time for this.

Change span classes for glyphicons with Themler icons codes. Had no time for this.
Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

Filename of your custom template should be: category-menu-items-category.php if name of category is as above. If you have own category name adapt template filename accordingly.

Filename of your custom template should be: **category-menu-items-category.php** if name of category is as above. If you have own category name adapt template filename accordingly.
Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

I see now it needs as many categories as it is menu items. Was hoping to avoid it, Google index categories.

I see now it needs as many categories as it is menu items. Was hoping to avoid it, Google index categories.
Stagger Lee
1743 Posts
Stagger Lee posted this 19 January 2016

Some update, more better way. Just realized Themler can recognize blocks everywhere even if it is simple Post template,
So update is:

  • Use most of tutorial above.
  • Dont need any Post category, forget it.
  • Instead of Custom templates in Themle make Post templates, one per one Menu Item. Name them as you wish.
  • Still one post per one menu item. Dont forget to disable comments for those posts, dont assign them to any category, not needed now. Put them as private Posts, and Prending review. So they are not directly accessible to Google spiders.
  • Not important anymore how are filenames of templates named.
  • Not so easy now to find "theme_blog_15();" but in theme root check all single_xx.php. Takes few seconds. Your name of the template is at the top when you open files.

Use this CMS control PHP/HTML code now, adapt numbers to your own situation.:


<div class="container">
<nav class="navbar navbar-default">

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 1 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
query_posts('p=3607');

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
query_posts('p=3609');

//Get the Posts
theme_blog_16();
wp_reset_query();
?>
</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 3 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
query_posts('p=3611');

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>

</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 4 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
query_posts('p=3613');

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 5 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
query_posts('p=3615');

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>
</li>

</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>

Some update, more better way. Just realized Themler can recognize blocks everywhere even if it is simple Post template, So update is: - Use most of tutorial above. - Dont need any Post category, forget it. - Instead of Custom templates in Themle make Post templates, one per one Menu Item. Name them as you wish. - Still one post per one menu item. Dont forget to disable comments for those posts, dont assign them to any category, not needed now. Put them as private Posts, and Prending review. So they are not directly accessible to Google spiders. - Not important anymore how are filenames of templates named. - Not so easy now to find "theme_blog_15();" but in theme root check all single_xx.php. Takes few seconds. Your name of the template is at the top when you open files. Use this CMS control PHP/HTML code now, adapt numbers to your own situation.: -------------------- &lt;div class="container"&gt; &lt;nav class="navbar navbar-default"&gt; &lt;div class="collapse navbar-collapse js-navbar-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 1 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php query_posts('p=3607'); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 2 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php query_posts('p=3609'); //Get the Posts theme_blog_16(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 3 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php query_posts('p=3611'); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 4 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php query_posts('p=3613'); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 5 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php query_posts('p=3615'); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /.nav-collapse --&gt; &lt;/nav&gt; &lt;/div&gt;
Stagger Lee
1743 Posts
Stagger Lee posted this 20 January 2016

Here it is:

  • Make one Post template for each menu item (name is not important) 5 menu items = 5 Post templates.
  • Disable header, footer on all of them and click on all 3 places Customize template style (very important)
  • Remove from them all you want, but you can do it later in Megamenu too.
  • Dont delete Content - Post block. Delete Post control inside it (a have to, very important)
  • Add new CMS Code control on Home template
  • Add code below inside, and CSS code from this topic above in same control.
  • Not so easy now to find "theme_blog_15();" but in theme root check all single_xx.php. Takes few seconds. Your name of the template is at the top when you open files.

CSS Code control code:

<div class="container">
<nav class="navbar navbar-default">

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 1 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_10();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_14();
wp_reset_query();
?>
</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 3 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_15();
wp_reset_query();
?>

</ul>

</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 4 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_16();
wp_reset_query();
?>

</ul>
</li>

<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 5 <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">

<?php
$args=array(
'posts_per_page' => 1,
);
query_posts($args);

//Get the Posts
theme_blog_17();
wp_reset_query();
?>

</ul>
</li>

</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>

Here it is: - Make one Post template for each menu item (name is not important) 5 menu items = 5 Post templates. - Disable header, footer on all of them and click on all 3 places Customize template style (very important) - Remove from them all you want, but you can do it later in Megamenu too. - Dont delete Content - Post block. Delete Post control inside it (a have to, very important) - Add new CMS Code control on Home template - Add code below inside, and CSS code from this topic above in same control. - Not so easy now to find "theme_blog_15();" but in theme root check all single_xx.php. Takes few seconds. Your name of the template is at the top when you open files. CSS Code control code: &lt;div class="container"&gt; &lt;nav class="navbar navbar-default"&gt; &lt;div class="collapse navbar-collapse js-navbar-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 1 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_10(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 2 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_14(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 3 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_15(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 4 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_16(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 5 &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt; &lt;?php $args=array( 'posts_per_page' =&gt; 1, ); query_posts($args); //Get the Posts theme_blog_17(); wp_reset_query(); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /.nav-collapse --&gt; &lt;/nav&gt; &lt;/div&gt;
Stagger Lee
1743 Posts
Stagger Lee posted this 20 January 2016

Some screenshots. But it is up to you how will you make Megamenus content. No limits with Themler. Use Sections and adapt them it you will.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Some screenshots. But it is up to you how will you make Megamenus content. No limits with Themler. Use Sections and adapt them it you will. ![enter image description here][1] ![enter image description here][2] ![enter image description here][3] ![enter image description here][4] ![enter image description here][5] [1]: http://attachments.answers.billiondigital.com/670/9670/2016-01-20-015936.jpg [2]: http://attachments.answers.billiondigital.com/671/9671/2016-01-20-015949.jpg [3]: http://attachments.answers.billiondigital.com/673/9673/2016-01-20-020027.jpg [4]: http://attachments.answers.billiondigital.com/674/9674/2016-01-20-020041.jpg [5]: http://attachments.answers.billiondigital.com/675/9675/2016-01-20-020351.jpg

Last edited 20 January 2016 by Stagger Lee

DouzanGraphics
91 Posts
DouzanGraphics posted this 20 January 2016

WOW , You're a creative genius!
I'll try it this weekend, Thank you.

WOW , You're a creative genius! I'll try it this weekend, Thank you.

Last edited 20 January 2016 by DouzanGraphics

Stagger Lee
1743 Posts
Stagger Lee posted this 20 January 2016

Some notes, if someone did not catch point.

All you see on those screenshots, you can now click directly inside it and edit with Themler. Same way you edit anything else.
All changes are done to isolated Post templates. But from this standpoint on it is not anymore important for you. You never visit them anymore.

Few examples:
- Click on video and edit video settings.
- Click on contact form and edit input fields, style
- Click on section and change it, edit it, etc..
- click on images inside sections/containers/rows and edit them.

Maybe best part of all this is ability to insert everything inside rows and easy style design for small devices, responsive.

It was just some quick test. I personally would on real website keep all those things much, much smaller. But it is a taste thing.

Some notes, if someone did not catch point. All you see on those screenshots, you can now click directly inside it and edit with Themler. Same way you edit anything else. All changes are done to isolated Post templates. But from this standpoint on it is not anymore important for you. You never visit them anymore. Few examples: - Click on video and edit video settings. - Click on contact form and edit input fields, style - Click on section and change it, edit it, etc.. - click on images inside sections/containers/rows and edit them. Maybe best part of all this is ability to insert everything inside rows and easy style design for small devices, responsive. It was just some quick test. I personally would on real website keep all those things much, much smaller. But it is a taste thing.

Last edited 20 January 2016 by Stagger Lee

tropicalserver
104 Posts
tropicalserver posted this 20 January 2016

Wow looks nice, I'm gonna check it.

@Themler team we are for waiting for this feature more than one year....

Wow looks nice, I'm gonna check it. @Themler team we are for waiting for this feature more than one year....
Stagger Lee
1743 Posts
Stagger Lee posted this 20 January 2016

If you start to test it put whole CMS Code control (Megamenu HTML) inside a Section control. You can export it and use for next website, adapt it later. Saving much time.

If you start to test it put whole CMS Code control (Megamenu HTML) inside a Section control. You can export it and use for next website, adapt it later. Saving much time.
yolaqr
2 Posts
yolaqr posted this 09 April 2016

Will this work for prestashop?

Will this work for prestashop?
Stagger Lee
1743 Posts
Stagger Lee posted this 09 April 2016

Dont know. Have not tried. It should go if you use Prestashop specific code for page templates.

Dont know. Have not tried. It should go if you use Prestashop specific code for page templates.

Last edited 09 April 2016 by Stagger Lee

shaulhadar
389 Posts
shaulhadar posted this 10 April 2016

Stagger is there any chance you can upload here the section , I would really like to check this out:)

Stagger is there any chance you can upload here the section , I would really like to check this out:)
Stagger Lee
1743 Posts
Stagger Lee posted this 10 April 2016

It will give you probably error, proceed with saving and later in CMS control change theme_blog_13(); to your own custom hidden templates.

It will give you probably error, proceed with saving and later in CMS control change **theme_blog_13();** to your own custom hidden templates.
Stagger Lee
1743 Posts
Stagger Lee posted this 10 April 2016

Menu is something "fix it once per site, and dont touch it anymore".
It would be nice to be able to insert sections and controls in items without need of post loops. So long I have not find solution. If someone makes it just write it here.

If content of menu items is not dynamic of course. I guess 60-80% of websites are like this. Or better to say 60-80% of peoples desires and wishes.

But this way even CMS code control and any kind ot wp queries could be made. No need for hidden templates. This with hidden templates really makes many clicks. Not only that, difficult to remember where everything is, as soon theme got a bit complex.

One problem is missing Post grids (rows, columns) stylng. Can be achieved with WordPress offset attribute. Menu items dont take many content anyway.

Menu is something "fix it once per site, and dont touch it anymore". It would be nice to be able to insert sections and controls in items without need of post loops. So long I have not find solution. If someone makes it just write it here. If content of menu items is not dynamic of course. I guess 60-80% of websites are like this. Or better to say 60-80% of peoples desires and wishes. But this way even CMS code control and any kind ot wp queries could be made. No need for hidden templates. This with hidden templates really makes many clicks. Not only that, difficult to remember where everything is, as soon theme got a bit complex. One problem is missing Post grids (rows, columns) stylng. Can be achieved with WordPress offset attribute. Menu items dont take many content anyway.

Last edited 10 April 2016 by Stagger Lee

david.cleveland
6 Posts
david.cleveland posted this 12 January 2017

I'm sorry, I must be completely stupid about this, I'm pretty much lost after step 14, but really confused by the comments after step 15. Could you help walk a guy through the process in a bit more detail, I'd really appreciate it.

Currently I have the CMS code on my Home template and the CSS code installed as well.

I'm sitting with a PHP error dialog which is related to the comments after step 15 and also in the comments below your post. I just for the life of me can't figure out how to implement this.

PHP Error

Please forgive my ignorance. I really need to get this implemented.

Themler...PLEASE give us a usable option for a MegaMenu and also PLEASE allow us to have links to Lightboxes in regular HTML pages

I'm sorry, I must be completely stupid about this, I'm pretty much lost after step 14, but really confused by the comments after step 15. Could you help walk a guy through the process in a bit more detail, I'd really appreciate it. Currently I have the CMS code on my Home template and the CSS code installed as well. I'm sitting with a PHP error dialog which is related to the comments after step 15 and also in the comments below your post. I just for the life of me can't figure out how to implement this. ![PHP Error][1] Please forgive my ignorance. I really need to get this implemented. Themler...PLEASE give us a usable option for a MegaMenu and also PLEASE allow us to have links to Lightboxes in regular HTML pages [1]: http://i300.photobucket.com/albums/nn12/davidcleveland/Capture_zpsgkrtiyjp.jpg

Last edited 12 January 2017 by david.cleveland

Stagger Lee
1743 Posts
Stagger Lee posted this 12 January 2017

You dont have that PHP file inside "includes" (no PHP file ends with number 15, find right number of your new made hidden custom template)
Read topic again and do everything by info.

Your error has nothing to do with 14.-15. numbers.

You dont have that PHP file inside "includes" (no PHP file ends with number 15, find right number of your new made hidden custom template) Read topic again and do everything by info. Your error has nothing to do with 14.-15. numbers.
Webnoesys IT Solutions LLP
101 Posts
Webnoesys IT Solutions LLP posted this 2 weeks ago

Hi Lee,

Wow!!!!!!

Can we use your above mega menu code for HTML Projects too. Please let us know the step by step procedure, we are new to this filed.

Hope you will provide details ASAP. This has to be the default feature of Themler but you really put lots of effort to make it possible. We respect your creativity & genuine work.

Kindly let us know do you have implemented anywhere I mean share the website links of your project for our inspiration.

And, please share the details how to implement the mega menu of your kind into our HTML Projects from start. Because we don't have any PHP files with our project so I am wondering how to implement it.

Need your help please..

Appreciate your work & efforts.

Regards
Suffian Ahmed

Hi Lee, Wow!!!!!! Can we use your above mega menu code for HTML Projects too. Please let us know the step by step procedure, we are new to this filed. Hope you will provide details ASAP. This has to be the default feature of Themler but you really put lots of effort to make it possible. We respect your creativity & genuine work. Kindly let us know do you have implemented anywhere I mean share the website links of your project for our inspiration. And, please share the details how to implement the mega menu of your kind into our HTML Projects from start. Because we don't have any PHP files with our project so I am wondering how to implement it. Need your help please.. Appreciate your work & efforts. Regards Suffian Ahmed
You must log in or register to leave comments