- Responsive Multi-Purpose Theme Framework! ›
- Forums ›
- Theme Support ›
- Dropdown menu opens in window resize
You can activate “Dont make menu automatically open when hover” option from Nagivation section in customizer.
Sorry, you cant have both now.. Maybe in future, when bootstrap goes 3.0 version, somethings can change but for now, you have to pick one or another.
Np. You can send a review in http://wordpress.org/support/view/theme-reviews/firmasite if you want. It means a lot for new users that thinking to use theme.
I know its not what you expect but as i said, you cant have both now.. Maybe in future, when bootstrap goes 3.0 version, somethings can change but for now, you have to pick one or another.
I know what you mean, but that’s not the problem.
I picked the one that opens when hovered. But not only it opens when hovered, it also opens when I resize the window.
This is the only instruction I found in the code relating the media size and the dropdown menu:
@media (max-width: 980px){
ul.nav li.dropdown > ul.dropdown-menu {
display: block;
}
I changed the max-width and nothing happens.
What else could I try?
Its not that easy. You have to write advanced css/js for this.
You can try to activate “Dont make menu automatically open when hover” option from Nagivation section in customizer and try this another solution for hover-menu:
http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
I fixed the problem with a different approach. It will be released in next version of FirmaSite but if you want to start to use it now;
- open
/functions/init.php
file, - find
function firmasite_hover_nav
- replace all function with this:
function firmasite_hover_nav() { // adding an empty block for visible checking ?><div class="visible-desktop"></div> <script type="text/javascript"> (function ($) { function firmasite_hover_nav() { var hover_nav_style = "<style id='hover-nav' type='text/css'> ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; margin-bottom: 0; } <?php global $is_IE; if ($is_IE) { ?>.browser_ie ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; } .browser_ie .nav-tabs .dropdown-menu, .browser_ie .nav-pills .dropdown-menu, .browser_ie .navbar .dropdown-menu { margin-top: 0; margin-bottom: 0; }<?php } ?></style>"; if ($(".visible-desktop").css("display") === "block" ){ $("link#bootstrap-css").after(hover_nav_style); $('a.dropdown-toggle').each(function(){ var data_toggle = $(this).attr('data-toggle'); $(this).attr('data-toggle-removed',data_toggle).removeAttr('data-toggle'); }); } else { $("style#hover-nav").remove(); $('a.dropdown-toggle').each(function(){ var data_toggle_removed = $(this).attr('data-toggle-removed'); if (data_toggle_removed && data_toggle_removed.length) $(this).attr('data-toggle',data_toggle_removed).removeAttr('data-toggle-removed'); }); } } $(window).resize(function(){ firmasite_hover_nav(); }); jQuery(document).ready(function($){ firmasite_hover_nav(); }); })(window.jQuery); </script> <?php }
Hey there,
this code for the hover over menu works amazingly well. i have been searching and searching for this fix. one question tho. when you hover with this code it gives you ALL of the submenu’s is there a way to only have the first sub menu?
right now the hover looks like this
Team
—–>Arkham
———–>Tree Stomp #12
What i would like it to look like is:
Team
—–>Arkham
is there a way to adjust the code so that only the one submenu shows instead of ALL of them? thanks so much for all your hard work.
Tree
NM I had a blonde moment………i just removed the subsubmenu from the menu……
You must be logged in to reply to this topic.