-
Seems like a reasonable thing….
clearly, there’s some code that does the responsive More thing…can’t we just get rid of it?Does anyone other than Daniel know where in the css or phone code this is?
Daniel is probably overwhelmed with work – let’s help him out!+1
I have the same problem with the More menu – none of the links in it actually work when they are supposed to trigger dropdown menus. The mobile menu does work. I really like this theme, but this issue will make it a non-starter for me.Also, I notice that the More menu appears when the browser window is made smaller, but the full navbar does not reliably reappear when the window is made larger again.
Yes, your observations are consistent with what we are all reporting.
I too love this theme! But as yiu said, a faulty nav bar makes this a non starter.Daniel: Any updates to this? This seems to be a hot issue.
Has anyone else been able to solve this?
I found the issue. Bootstrap was being loaded twice in the
<head>. I had a plugin that was loading Bootstrap also. It had an option not to load bootstrap which I selected and problem solved.Check to see what other plugins are loading Bootstrap.
Unfortunately that’s not the problem I have – Bootstrap is only loaded once on my site.
I’m working on comparing the ‘More’ menu with the mobile menu. The mobile menu works correctly, so I’m trying to work out what the differences are. So far I can see that the Javascript which fires when a sub-menu in the more menu is clicked changes the ‘aria-expanded’ property on the sub-menu from “false” to “true” and adds the class “open”. However, the menu disappears at the same time and the properties are reset next time you click ‘More’ to show the emnu again.
I wonder if it will be OK if I can get it to stay on-screen rather than disappearing after an item is clicked?
Ben
Mcuomo2013: can you give more detail? How did you turn off bootstrap from loading twice? Which plug-ins are you running?
I’m running the plugin Content Views Pro, which has an option in the settings to prevent Bootstrap from loading (I presume the option is there for cases like this when other plugins or themes load Bootstrap). I simply checked the box and refreshed and everything worked fine.
Check the HTML of your site in the browser to see if anything is loading Bootstrap more than once. It took me a while to figure it out, but I was using Firefox’s Inspect Element tool to explore what was going on in the CSS. It was very helpful.
Thanks. But I checked out your site, michaelvcuomo.com, and the problem is still there. More still appears upon re-sizing, and does not go away once you enlarge the browser window.
Benlye – any progress?
Anyone else nervous that Daniel has not been around answering support for a while?
I haven’t had any luck. Thought I was getting somewhere playing with the CSS, but ended up breaking the navbar dropdown. I’m pretty close to giving up and am looking at other themes. Shame, as Enlightenment beats most of the others I’ve tried in pretty much every other way. I would even probably pay for it if there was support and this issue was fixed.
I took another look at this, and I’m making some progress.
I have the ‘More’ menu expanding back out on resize to a larger window, and I have the ‘More’ sub-menus partially working – they work when the page is loaded at a display size that makes the ‘More’ menu appear from the outset, but they don’t work properly yet when the window is resized down.
More news in the next day or so, and I’ll share some code.
Ben
So I think I have a fix. Or rather, I have a fix that works for me. My navbar is only one submenu, and I haven’t tested any more layers than that. Word of warning, this fix requires editing the theme’s code – any future updates will overwrite it. Hopefully the devs can take a look and see if this can be incorporated in future updates. Also, I’m pretty new to jQuery and Bootstrap. I make no promises about the quality of this code. It works for me; I probably can’t help you with it.
First fix – make the ‘More’ menu go away when the window is enlarged
Edit /wp-content/themes/enlightenment/js/call.js;
Find the line (around line 28) which looks like this:
if($(window).width() >= 768)
and change it to this:
if($(window).width() >= 768 && $(window).width() <= 1000)
Note: I used ‘1000’ because it works with my navbar. You may want to try another value if things don’t look right for you.Second fix – make the ‘More’ menu work for submenus
Again, edit /wp-content/themes/enlightenment/js/call.js;
Find the two functions enlightenment_trim_nav and enlightenment_untrim_nav;
Replace them both with this code:function enlightenment_trim_nav() { if($('#masthead').get(0).offsetHeight < $('#masthead').get(0).scrollHeight) { if( ! $('#more-links').length ) $('#site-navigation .nav').append('<li id="more-links" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#more-links">' + enlightenment_theme_call_js.nav_more_text + ' <span class="caret"></span></a><ul class="dropdown-menu"></ul></li>'); $($('#site-navigation .nav > .menu-item').get().reverse()).each(function() { if($('#masthead').get(0).offsetHeight < $('#masthead').get(0).scrollHeight) $(this).prependTo('#more-links > .dropdown-menu'); }); $('#more-links .dropdown').each(function() { $(this).removeClass('dropdown'); $(this).addClass('dropdown-submenu'); $(this).find(".dropdown-toggle").attr('data-toggle',''); $(this).find(".dropdown-toggle").attr('href','#'); $(this).find(".dropdown-toggle").removeAttr('class'); }); } } function enlightenment_untrim_nav() { $('#more-links > .dropdown-menu').children().each(function() { $(this).appendTo('#site-navigation .nav'); if($(this).hasClass('dropdown-submenu')) { $(this).removeClass('dropdown-submenu'); $(this).addClass('dropdown'); $(this).find("a:first").attr('data-toggle','dropdown'); $(this).find("a:first").addClass('dropdown-toggle'); } }) $('#more-links').remove(); }Next, in the Theme Options, go to Design and enter this custom CSS:
/* Make drop down sub menus appear when collapsed */ .dropdown-submenu .caret, .dropdown-submenu .dropdown-close { display: inline-block; } .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:0px; -webkit-border-radius:0 0px 0px 0px; -moz-border-radius:0 0px 0px 0px; border-radius:0 0px 0px 0px; position: relative; border: medium none; box-shadow: none; text-indent: 10px; min-width: 150px; padding: 0px 0px; margin: 0px 0px 0px 0px; width: 100%; } .dropdown-submenu:active>.dropdown-menu { display: block; } .dropdown-submenu:active>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none; } .dropdown-submenu.pull-left>.dropdown-menu { left:-100%;margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } /*End dropdown sub-menus*/Good luck!
I missed out a couple of extra changes to /wp-content/themes/enlightenment/js/call.js:
Find the line which looks like this (it’s just above the first change we made):
enlightenment_trim_nav();and change it to this:
if ($(window).width() <= 1000) enlightenment_trim_nav();Again, you may want to change ‘1000’ to something else, depending on the width of your nav menu.
Next, go to the end of call.js and add these two functions:
$(document).on("click", ".dropdown-submenu", function(event) { event.stopPropagation(); // close any siblings $( this ).siblings().removeClass('open'); // add 'open' class to all parents with class 'dropdown-submenu' $( this ).parents(".dropdown-submenu").addClass('open'); // this is also open (or was) $( this ).toggleClass('open'); }); $('.dropdown').on('hidden.bs.dropdown', function () { $( ".dropdown" ).find(".dropdown-submenu").removeClass('open'); });They must be added before the last line in the file (the closing line should be another
});)@benlye Could you post a link to your site to see how it is supposed to work?
I asked a developer buddy to look into this.
This is the best theme I’ve found, free or pay, for what I’m trying to do, but there are definitely some kinks to work out.
Sure – my site is here. You’ll need to accept the dodgy SSL certificate. It’s a dev site, and a work in progress, so won’t be there forever.
You must be logged in to reply to this topic.