yetkind

Thank you so much @flydev I end up worked with first two link you gave me I managed it work Thank you for your guys patience for newbies...

I have a quick contact form in my footer How can I make it work via processwire ?

Thank you so much menu css come with a template that I bought called "menuzord menu" I don't wanna get in the whole css code which is many but when I changed last thing you mentioned here removed one of the dropdown is now working perfectly.... you saved the day... I think spending to much time on same page I lost my focus thank you for seing that on my behalf!.....

Thank you so much this is solved my problem for active class but now dropdown dissaperead ? do you have any idea why its happaned ? here is my current code <nav id="menuzord-right" class="menuzord default menuzord-responsive"> <a class="menuzord-brand pull-left flip xs-pull-center mt-20" href="/processwire/"> <img src="<?php echo $config->urls->templates?>/ind/logo.png" alt=""> </a> <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module $options = array( 'parent_class' => 'parent', // overwrite class name for current parent levels 'current_class' => 'active', // overwrite current class 'has_children_class' => 'dropdown', // overwrite class name for entries with children 'levels' => false, // wether to output "level-1, level-2, ..." as css class in links 'levels_prefix' => 'level-a', // prefix string that will be used for level class 'max_levels' => 2, // set the max level rendered 'firstlast' => false, // puts last,first class to link items 'collapsed' => false, // if you want to auto-collapse the tree you set this to true 'show_root' => true, // set this to true if you want to rootPage to get prepended to the menu 'selector' => 'template!=MediaLibrary', // define custom PW selector, you may sanitize values from user input 'selector_field' => 'nav_selector', // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector 'outer_tpl' => '<ul class="menuzord-menu">||</ul>', // template string for the outer most wrapper. || will contain entries 'inner_tpl' => '<ul class="dropdown">||</ul>', // template string for inner wrappers. || will contain entries 'list_tpl' => '<li%s>||</li>', // template string for the items. || will contain entries, %s will replaced with class="..." string 'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id} 'item_tpl' => '<a href="{url}">{title}<span class="indicator"></span></a>', // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple) 'item_current_tpl' => '<a href="{url}">{title}</a>', // template string for the active inner items. 'xtemplates' => '', // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup 'xitem_tpl' => '<a href="{url}">{title}</a>', // same as 'item_tpl' but for xtemplates pages, can be used to define placholders 'xitem_current_tpl' => '<span>{title}</span>', // same as 'item_current_tpl' but for xtemplates pages 'date_format' => 'Y/m/d', // default date formatting for Datetime fields and native created/modified 'code_formatting' => true, // enable or disable code indentations and newslines in markup output 'debug' => false, // show some inline information about rendertime and selectors used as html comments ); echo $treeMenu->render($options); // render menu ?> </nav> and this is html output <ul class="menuzord-menu"> <li class="active"><a href="/processwire/">Home</a></li> <li><a href="/processwire/company/">Company<span class="indicator"></span></a></li> <li class="dropdown"><a href="/processwire/products/">Product & Solutions<span class="indicator"></span></a> <ul class="dropdown"> <li><a href="/processwire/product1/">product1</a></li> I realized my template currently working without implemented to processwire html output is like this <ul class="menuzord-menu"> <li class="active"><a href="#home">HOME</a></li> <li><a href="#">COMPANY<span class="indicator"><i class="fa fa-angle-down"></i></span></a> <ul class="dropdown" style="right: auto; display: none;"> <li><a href="#">item title</a></li> <li><a href="#">item title</a></li> but as I mention in this post 2 quote above out put come like this below and it dropdown is not working how can I output that like the one below... thanks in advance and your patience <ul class="menuzord-menu menuzord-right menuzord-indented scrollable" style="max-height: 400px; display: block;"> <li class="active"><a href="/processwire/">Home</a></li> <li><a href="/processwire/company/">Company<span class="indicator"></span></a></li> <li class="dropdown" style="display: none;"><a href="/processwire/products/">Product &amp; Solutions</a> <ul class="dropdown" style="right: auto;"> <li><a href="/processwire/product1/">product1<span class="indicator"></span></a></li>

Thank you so much Robin I will reduce options after solved this one, I tried as you said nothing changed now there is no active class even in <a href> <li><a href="#home">HOME</a></li> What I ment is current code give "active" class to <A href> not to <Li> so my menu is not working properly

Sorry for the second post but anyone active ? on this topic I really really need help on this.

Hello currently my code is output this above (edit: as you might notice active class go in item not in <li> ) If I can make it like this above my css will be work perfectly but can't fixed yet.... my php code is below here, any help appreciated Thanks in advance <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module $options = array( 'parent_class' => 'parent', // overwrite class name for current parent levels 'current_class' => 'active', // overwrite current class 'has_children_class' => 'has_children dropdown', // overwrite class name for entries with children 'levels' => true, // wether to output "level-1, level-2, ..." as css class in links 'levels_prefix' => 'level-a', // prefix string that will be used for level class 'max_levels' => 2, // set the max level rendered 'firstlast' => false, // puts last,first class to link items 'collapsed' => false, // if you want to auto-collapse the tree you set this to true 'show_root' => true, // set this to true if you want to rootPage to get prepended to the menu 'selector' => 'template!=MediaLibrary', // define custom PW selector, you may sanitize values from user input 'selector_field' => 'nav_selector', // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector 'outer_tpl' => '<ul class="menuzord-menu">||</ul>', // template string for the outer most wrapper. || will contain entries 'inner_tpl' => '<ul class="dropdown">||</ul>', // template string for inner wrappers. || will contain entries 'list_tpl' => '<li>||</li>', // template string for the items. || will contain entries, %s will replaced with class="..." string 'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id} 'item_tpl' => '<a href="{url}">{title}<span class="indicator"></span></a>', // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple) 'item_current_tpl' => '<a class="active" href="{url}">{title}</a>', // template string for the active inner items. 'xtemplates' => '', // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup 'xitem_tpl' => '<a href="{url}">{title}</a>', // same as 'item_tpl' but for xtemplates pages, can be used to define placholders 'xitem_current_tpl' => '<span>{title}</span>', // same as 'item_current_tpl' but for xtemplates pages 'date_format' => 'Y/m/d', // default date formatting for Datetime fields and native created/modified 'code_formatting' => true, // enable or disable code indentations and newslines in markup output 'debug' => false, // show some inline information about rendertime and selectors used as html comments ); echo $treeMenu->render($options); // render menu ?>