Hi Tom,
I made the modifications as you suggested in the link. The menu renders as expected on desktop layouts, but not on mobiles. The toggle buttons (e.g. search icon) follows the menu as it expands when the hamburger icon is clicked. I’ll check whether there are any CSS elements overriding the menu functionality and add to the knowledge base here.
Thanks for looking into this. Really appreciate it.
– Mithun
Hi Tom,
I’ve been checking the CSS and JS files for the Hueman theme and though I’m close to the solution, I haven’t been able to nail it with a fix. So, I’d like to solicit your help.
As I documented earlier, the plugin works flawlessly on Desktop resolutions. However, when switching to mobile, the following behaviour causes trouble. I’m attaching some screenshots to articulate the behaviour.
On mobile, the menu perfectly renders without glitch. I’ve uploaded the screenshot to my Dropbox account. Here it is:
https://www.dropbox.com/s/ogsikqtha9kej8a/Hide.png
On mobile resolutions, the menu, when clcked, appears as follows:
https://www.dropbox.com/s/jhf0hk8v0zbz10q/Show.png
As you see, the contents between <nav> and </nav> also slide down with the panel. Could you recommend some workarounds, please?
I’m also including the code that produces this behaviour:
<?php if ( has_nav_menu('topbar') ): ?>
<nav class="nav-container group" id="nav-topbar">
<div class="container">
<?php wp_nav_menu( array('theme_location'=>'topbar') ); ?>
<?php insert_color_bar_separator(); ?>
<div class="container-inner">
<div class="toggle-tools"><i class="fa fa-cog"></i></div>
<div class="tools-expand">
<?php echo display_clock(); ?>
<div class="tools-expand-inner">
<div class="toggle-login" title="Login / Logout"><i class="fa fa-lock"></i></div>
<?php if( 'on' == ot_get_option('enable-font-resizer') ) { ?>
<div class="toggle-plus" title="Increase font size"><i class="fa fa-plus-square-o"></i></div>
<div class="toggle-minus" title="Increase font size"><i class="fa fa-minus-square-o"></i></div>
<?php } ?>
</div>
</div>
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
<div class="search-expand-inner">
<?php get_search_form(); ?>
</div>
</div>
</div><!--/.container-inner-->
</div><!--/.container-->
</nav><!--/#nav-topbar-->
<?php endif; ?>
For all practical purpose, the styling for the contents between the navs is derived from the Hueman theme styling.
Any ideas that could move me further?
Thanks in advance,
Mithun
Hi Mithun,
The code you have pasted does not match what I see in the header.php file of a clean install of Hueman, so maybe that’s the problem.
Please try replacing the code you have pasted with the code in the last step on this page: http://www.maxmegamenu.com/documentation/faqs/theme-integration/hueman/ (basically, get rid of most of that stuff and replace it with just the menu itself)
Regards,
Tom
