How to relatively easy make Mega Menu with Themler

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 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; }

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

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.

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

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>

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>

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.

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

Last edited 20 January 2016 by DouzanStudio

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.

Wow looks nice, I'm gonna check it.

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

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.

Will this work for prestashop?

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

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

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

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.

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.

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

Last edited 12 January 2017 by david.cleveland

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.

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