ThemeShaper Forums Tag: Responsive Menu

ThemeShaper Forums Tag: Responsive Menu http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sat, 25 May 2013 11:41:51 +0000 bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu/page/2#post-26607 Tue, 24 Apr 2012 17:40:00 +0000 bogh 26607@http://themeshaper.com/forums/ You saved me again :) Thank you. helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu/page/2#post-26606 Tue, 24 Apr 2012 17:17:14 +0000 helgatheviking 26606@http://themeshaper.com/forums/ yeah i ran into that myself the other day for another reason. but the solution is actually in how thematic handles it: <pre><code>// Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu function add_menuclass($ulclass) { return preg_replace('/<ul>/', '<ul class="yourclass">', $ulclass, 1); } add_filter('wp_page_menu','add_menuclass');</code></pre> bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu/page/2#post-26605 Tue, 24 Apr 2012 16:57:42 +0000 bogh 26605@http://themeshaper.com/forums/ :) I am still finding issues with it, and maybe you will find more. Please help me with this one: I have done this to add a the "nav" class to the "ul" <pre><code>function Aeryn_menu_args( $args ) { $args = array( 'menu_class' => 'nav sf-menu', 'container_class' => 'menu' ); return $args; } add_filter( 'thematic_nav_menu_args', 'Aeryn_menu_args' );</code></pre> But I can't do the same for "thematic_page_menu_args", because in it's case 'menu_class' is the class for the DIV above the UL. Thanks. helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu/page/2#post-26597 Tue, 24 Apr 2012 14:59:07 +0000 helgatheviking 26597@http://themeshaper.com/forums/ nice share. i'll have to check that out at some point. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26596 Tue, 24 Apr 2012 12:52:10 +0000 bogh 26596@http://themeshaper.com/forums/ See a screenshot with my responsive menu here: <a href="http://i39.tinypic.com/15i20ow.png" rel="nofollow">http://i39.tinypic.com/15i20ow.png</a> For those who want to try my responsive menu follow the steps: 1. In your Thematic Child Theme create a folder called "js" and add a JS file, with the name "responsive.menu.js" and add the following code: <pre><code>(function($) { $.fn.pixyResponsiveMenu = function(options) { var $pixy_mobile_nav_button = $('#mobile_nav'), $pixy_mobile_nav_button_close = $('#mobile_nav_close'), $pixy_nav = $('.menu'), pixy_container_width = jQuery(window).width() || jQuery(document).width(); if ( pixy_container_width <= 800 ){ $pixy_nav.addClass('mobile_nav').find('> ul').removeClass('nav'); } $(window).resize( function(){ if ( pixy_container_width != jQuery(window).width() || jQuery(document).width() ) { pixy_container_width = jQuery(window).width() || jQuery(document).width(); if ( pixy_container_width <= 800 ){ $pixy_nav.addClass('mobile_nav').find('> ul').addClass('sf-menu_mobile').removeClass('nav').css({ 'display' : 'none', 'opacity' : '0', 'height' : '0' }).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false }); $pixy_mobile_nav_button.removeClass( 'opened' ).addClass( 'closed' ); $pixy_mobile_nav_button_close.removeClass( 'opened' ).addClass( 'closed' ); } else { $pixy_nav.removeClass('mobile_nav').find('> ul').removeClass('sf-menu_mobile').addClass('nav').css({ 'display' : 'inline-block', 'opacity' : '1', 'height' : '100%' }).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false }); } } }); $pixy_mobile_nav_button.click( function(){ if ( $(this).hasClass('closed') ){ $(this).removeClass( 'closed' ).addClass( 'opened' ); $pixy_mobile_nav_button_close.removeClass( 'closed' ).addClass( 'opened' ); $pixy_nav.find('> ul').css({ opacity : 0, 'display' : 'inline-block', height : 0 }).animate( { opacity: 1, height: '100%' }, 500 ).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false }); } else { $(this).removeClass( 'opened' ).addClass( 'closed' ); $pixy_mobile_nav_button_close.removeClass( 'opened' ).addClass( 'closed' ); $pixy_nav.find('> ul').animate( { opacity: 0, height: 0 }, 500, function(){ $(this).css( { 'display' : 'none' } ); }).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false }); } return false; }); $pixy_mobile_nav_button_close.click( function(){ if ( $(this).hasClass('closed') ){ $(this).removeClass( 'closed' ).addClass( 'opened' ); $pixy_nav.find('> ul').css({ opacity : 0, 'display' : 'inline-block', height : 0 }).animate( { opacity: 1, height: '100%' }, 500 ).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false }); } else { $(this).removeClass( 'opened' ).addClass( 'closed' ); $pixy_mobile_nav_button.removeClass( 'opened' ).addClass( 'closed' ); $pixy_nav.find('> ul').animate( { opacity: 0, height: 0 }, 500, function(){ $(this).css( { 'display' : 'none' } ); }).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false }); } return false; }); } })(jQuery);</code></pre> 2. Add this into functions.php: <pre><code>function remove_menu() { remove_action('thematic_header','thematic_access',9); } add_action('init', 'remove_menu'); // Moving the thematic menu add_action('thematic_header','child_thematic_access',10); function child_thematic_access() { ?> <div id="access"> <div id="mobile_menu"> <a href="#" id="mobile_nav" class="closed"><?php _e( 'Navigation Menu', 'thematic' ); ?></a> <a href="#" id="mobile_nav_close" class="closed"><?php _e( 'x', 'thematic' ); ?></a> </div> <?php $menuClass = 'nav'; if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) { echo wp_nav_menu(thematic_nav_menu_args()); } else { echo thematic_add_menuclass(wp_page_menu(thematic_page_menu_args())); } ?> </div> <?php } function pixy_enqueue_scripts() { wp_enqueue_script('pixyResponsiveMenu', get_stylesheet_directory_uri() . 'js/responsive.menu.js', array('jquery'), true); } add_action('wp_enqueue_scripts', 'pixy_enqueue_scripts'); function pixy_add_js_to_head() { ?> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <script type='text/javascript'> jQuery(document).ready(function($) { $('#access').pixyResponsiveMenu(); }); </script> <?php } add_action('wp_head', 'pixy_add_js_to_head');</code></pre> 3. Into style.css paste this: <pre><code>/* =pixyMenu Responsive -------------------------------------------------------------- */ #mobile_menu { width: 300px; margin: 0px auto; display: none; text-align: center; } #mobile_nav { position: relative; z-index: 1; display: block; margin: 0px -10px; line-height: 40px; color: #999; font-weight: bold; font-size: 20px; text-shadow: 1px 1px 0px #FFF; text-decoration: none; border: 1px solid #CCC; background: #F2F2F2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px 1px #000; -moz-box-shadow: 0px 0px 5px 1px #000; box-shadow: 0px 0px 5px 1px #000; } #mobile_nav.closed { /*You can add a different style for the options "opened" & "closed" */ } #mobile_nav.closed:hover { border: 1px solid #DDD; border-bottom: 1px solid #BBB; } #mobile_nav.opened { /*You can add a different style for the options "opened" & "closed" */ } #mobile_nav span { display: block; position: absolute; top: 9px; left: 10px; background: url(images/nav_menu_plus.png) no-repeat; width: 9px; height: 10px; } #main_nav { position: relative; } #mobile_nav_close { position: absolute; z-index: 1; bottom: -23px; margin-left: 10px; text-shadow: 1px 1px #FFE0CE; background: #FFC19C; border: 1px solid #FF8339; border-top: none; color: #BF4B06; font: bold 18px/22px Arial, sans-serif !important; text-decoration: none; padding: 0px 10px; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } #mobile_nav_close.closed { display: none; } #mobile_nav_close.opened { display: block; } .menu.mobile_nav { background: none; position: relative; top: 0px; } .menu.mobile_nav > ul { width: 300px; margin: 0px auto; padding: 0px; display: none; text-align: left; border: 1px solid #CCC; border-bottom: 2px solid #AAA; border-top: none; background: #F2F2F2; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } .menu.mobile_nav > ul > li > a { background: none !important; } .menu.mobile_nav > ul > li > ul { border-top: 1px solid #FFF; border-bottom: 1px solid #CCC; } .menu.mobile_nav li { float: none; list-style: none; background: none !important; padding: 0px !important; margin: 0px !important; } .menu.mobile_nav li a { color: #777; text-shadow: 1px 1px 0px #FFF; font-size: 14px; font-weight: bold; display: block; padding: 10px 10px; margin: 0px; width: auto; float: none; text-decoration: none !important; } .menu.mobile_nav li a:hover { color: #555; } .menu.mobile_nav li ul { visibility: visible !important; display: block !important; position: relative; overflow: hidden; top: 0px !important; left: 0px !important; width: auto !important; background: none; border: none; padding: 0; margin: 0px; padding-left: 15px; } .menu.mobile_nav li ul li { border: none !important; font-size: 12px; } .menu.mobile_nav li ul li a { border: none !important; font-size: 12px; padding: 3px 3px; } .menu.mobile_nav > ul > li:first-child > a { border-top: none; } .menu.mobile_nav > ul > li:last-child > a { border-bottom: none; } .menu.mobile_nav a { background: none; border: none; border-bottom: 1px solid #CCC; border-top: 1px solid #FFF; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .menu.mobile_nav li ul:before, .menu.mobile_nav > ul > li.current_page_item > a:after { background: none; } @media ( max-width: 800px ) { #access .home { display: none; } #mobile_menu { display: block; margin-top: 20px; } }</code></pre> 4. Replace ".sf-menu" with ".nav.sf-menu" I hope I haven't forgot any step. And I also hope that someone will help with improvements. The issue with the width of the dropdown menus, on resizing the browser, is still there. Enjoy. Thank you. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26509 Sat, 21 Apr 2012 06:38:46 +0000 bogh 26509@http://themeshaper.com/forums/ I know how is 12em inserted, and which file, what I don't understand is how is the width autogenerated in case the text exceeds 12em. Thanks anyway. ScottNix on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26495 Fri, 20 Apr 2012 20:56:41 +0000 ScottNix 26495@http://themeshaper.com/forums/ The file that inserts the 12em is thematic-dropdowns.js It is inserted by jquery on the fly bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26486 Fri, 20 Apr 2012 12:12:41 +0000 bogh 26486@http://themeshaper.com/forums/ I think it does a bit. I am trying to make a thematic responsive menu, and I am having some issues with the supersubs, because it does not autogenerates the width of the dropdown menus when the text exceeds 12em, this happens when I resize my browser, due to the js for the responsive menu I have done. So I was wondering how is that width autogenerated, maybe I can fix this issue with my responsive menu. But if it is not a Thematic thing I will be looking for an answer somewhere else, no worries. Thank you. helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26479 Thu, 19 Apr 2012 21:32:14 +0000 helgatheviking 26479@http://themeshaper.com/forums/ @bogh your question has nothing to do with the topic of this thread. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26470 Thu, 19 Apr 2012 18:53:02 +0000 bogh 26470@http://themeshaper.com/forums/ Can someone tell me how/where is the width of a drop-down menu generated, I mean when the text of an item exceeds the default min-width of 12em. Thanks. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26337 Fri, 13 Apr 2012 23:43:12 +0000 Jagst3r15 26337@http://themeshaper.com/forums/ He uses html5 so maybe I am just getting confused with the conversions going on in there (even though it's really just faking html5, so to speak). I'm trying to say we make one using the current thematic markup since it's really still valid and is less confusing to me at least helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26336 Fri, 13 Apr 2012 23:40:21 +0000 helgatheviking 26336@http://themeshaper.com/forums/ they use media queries too... so i'm not sure what you're finding confusing to offer any advice. oh well. would love to see a really sharp menu design in a future version of thematic. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26335 Fri, 13 Apr 2012 23:06:23 +0000 Jagst3r15 26335@http://themeshaper.com/forums/ Sorry. I just meant that the 320 and up framework seems a bit large and is a bit too complex to just mess around with; using the media queries as you do in the adaptive styles seems easier. I think we should to try and bundle them in a theme along with some JS to address menu and image re-sizing. helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26329 Fri, 13 Apr 2012 20:24:42 +0000 helgatheviking 26329@http://themeshaper.com/forums/ i mean i don't like percentage widths... so that the line length changes as you resize the browser. i love responsive layouts and need to do more of them. i'm not sure what you mean about the 320 stylesheet being kind of large b/c i haven't looked at it in a long time. the stylesheet can get large, but i think it is better (and i do it in practice) to paste all the @imports into style.css instead of having to make more "round trips" to download things. it might also have added a lot of stuff from the html boilerplate. if anything i need to apply the mobile-first approach taken in 320and up to my adaptive layouts. i've been doing that more in reality, but haven't updated my thematic sheets. my stylesheets are defo not the best for handling the menu. i'm not sure there is a 100% standard for handling this. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26326 Fri, 13 Apr 2012 15:46:30 +0000 Jagst3r15 26326@http://themeshaper.com/forums/ Yep, I have looked at that, but I didn't like how the styles were put in and it seemed to be a very large file and could use some slimming down. I think there's a version 2 of the 320 and up framework thingy out as well. I think it would be a good idea to update and use, but honestly helga's adaptive styles are awesome. I mean, they aren't the best for mobile devices, but they are an awesome solution for tablets and for reading when you have 2 windows open, etc. @helga, what do you mean you don't like the fluid layouts? raora on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26325 Fri, 13 Apr 2012 14:36:04 +0000 raora 26325@http://themeshaper.com/forums/ Have you looked at Thematic 320? Link: <a href="http://www.ejhansel.com/thematic-320-and-up-update-a-responsive-wordpress-child-theme/" rel="nofollow">http://www.ejhansel.com/thematic-320-and-up-update-a-responsive-wordpress-child-theme/</a> helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26324 Fri, 13 Apr 2012 14:13:30 +0000 helgatheviking 26324@http://themeshaper.com/forums/ if you're in my thematic adaptive github, then don't forget to check out the 978gs. it more closely" mirrors the "integrity of the thematic layout"... just with a little more breathing room. i don't really like the fluid grids anyway. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26320 Fri, 13 Apr 2012 03:07:55 +0000 Jagst3r15 26320@http://themeshaper.com/forums/ Hey guys, take a look at <a href="http://www.jagst3r15.com" rel="nofollow">http://www.jagst3r15.com</a> ... made some progress with a responsive design. Here's what I gotta fix: <ol>The slider is still really wacky</ol> <ol>I need to implement the toggle effect for the nav at smaller widths</ol> <ol>The primary and secondary menus get messed up and aren't centered properly when the screen is made smaller</ol> <ol>The title gets messed up when smaller too</ol> helga, btw I don't think the 1140px width for a basic thematic layout...I am gonna make some layouts for the good old 940/960ish px range since I think it preserves the integrity of the thematic layout more. I'll email them to you if you wanna put em on git. Let me know what you think so far. helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26297 Thu, 12 Apr 2012 15:18:34 +0000 helgatheviking 26297@http://themeshaper.com/forums/ removing the superfish scripts (which then you won't have animated dropdowns on desktops) can be found here <a href="http://themeshaper.com/forums/topic/thematic-menus-demystified-1#post-15284" rel="nofollow">http://themeshaper.com/forums/topic/thematic-menus-demystified-1#post-15284</a> though i have to admit that is now a bit outdated... the header scripts are going through a major overhaul in the current SVN version. so i'd recommend using <pre><code>function childtheme_override_head_scripts(){ // Abscence makes the heart grow fonder }</code></pre> that should work w/ both the current stable version and whenever gene comes out of hiding the version we udpated gets pushed live. in the future you'll be able to just remove the action from its hook, but not atm. as pertains to scope, but just b/c one is using thematic does automatically make everything one does with wordpress or jquery automatically a thematic issue. but i misunderstood your request and removing the superfish scripts from the header is indeed a thematic question... with the answer above. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26296 Thu, 12 Apr 2012 14:34:00 +0000 bogh 26296@http://themeshaper.com/forums/ You understood me wrong I guess, because I've added the class I wanted, I haven't asked for that. Sorry for not being more specific. I have done the menu as I wanted, almost as on themefit.com, without duplicating the menu. I think is almost perfect, except that animation on the dropdowns. But I should make a better reasearch, if you say my answer is somewhere then I will find it :D Thank you for your help. P.S.: I am trying to make this responsive menu for thematic, so I suppose it could be the scope of this forum, or am I wrong? ... And when it is finished I will post everything here, maybe it helps other too :) helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26294 Thu, 12 Apr 2012 14:17:06 +0000 helgatheviking 26294@http://themeshaper.com/forums/ i already showed you how to modify the class... its in my child_nav_args() function a few posts back. if you don't want those styles, then just remove the styles from CSS. if you remove the class, but leave the styles that's just bloating your stylesheet. read my menu thread for how to remove all dropdown scripts. it's stickied on the front page. getting some other jquery plugin to work for you really goes beyond the scope of this forum. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26293 Thu, 12 Apr 2012 12:12:45 +0000 bogh 26293@http://themeshaper.com/forums/ Or better tell me how I can remove the JS of the menu without removing it's classes, because I have another ideea. I have tried to edit the functions of the superfish: <pre><code>if ( pixy_container_width <= 800 ){ $pixy_nav.addClass('mobile_nav').find('> ul').removeClass('nav'); $pixy_nav.addClass('mobile_nav').find('> ul').superfish({ delay: false, // delay on mouseout animation: false, // fade-in and slide-down animation speed: false, // faster animation speed autoArrows: false, // enable generation of arrow mark-up dropShadows: false // disable drop shadows }); }</code></pre> The 'ul' is the 'sf-menu', the 'nav' is a new class I have added to the 'ul', but I don't think this is important. Please help me make this work :) I want to remove at least the animation. Because on mobile I want the submenus to be shown without hovering, so I have done that, but when I hover on a 'li.sfHover' it shows that animation, and it's annoying. bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26292 Thu, 12 Apr 2012 11:42:41 +0000 bogh 26292@http://themeshaper.com/forums/ Can you please tell me if it is possible to remove the sf-menu class without deactivating the JS of the menu. Something with JS would be nice. I have almost finished this responsive menu, but I can't manage how to do the thing I told you above. I need to remove it because I don't want all the styles of the sf-menu to be inherited to the menu that appears on small resolutions. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26284 Thu, 12 Apr 2012 04:59:21 +0000 Jagst3r15 26284@http://themeshaper.com/forums/ Note: I'm gonna mod the Acamas child theme to include the flexslider and a responsive layout. Check out <a href="http://jagst3r15.com" rel="nofollow">http://jagst3r15.com</a> on <a href="http://www.responsinator.com/" rel="nofollow">http://www.responsinator.com/</a> for some progress on it...very busy this week so won't get too much done (only have an unresponsive slider in there right now) Using helga's adaptive css layouts btw Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26283 Thu, 12 Apr 2012 01:26:08 +0000 Jagst3r15 26283@http://themeshaper.com/forums/ k, ima fork it and look into it. Do you think including a default script to minify the menu would be doable? helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26282 Thu, 12 Apr 2012 01:00:40 +0000 helgatheviking 26282@http://themeshaper.com/forums/ there's no reason you can't be responsive w/ thematic right now. i got something started here: <a href="https://github.com/helgatheviking/thematic-adaptive" rel="nofollow">https://github.com/helgatheviking/thematic-adaptive</a> would love any help you want to give to improve it. Jagst3r15 on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26277 Wed, 11 Apr 2012 22:02:04 +0000 Jagst3r15 26277@http://themeshaper.com/forums/ I am scratching my head wondering why the current Thematic can't just be slowly converted to html5 but quickly converted to be responsive design friendly...the former does not seem necessary, while the latter seems quite necessary and would help keep people using Thematic for the short term at least...thoughts? helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26276 Wed, 11 Apr 2012 21:43:41 +0000 helgatheviking 26276@http://themeshaper.com/forums/ check out the menu now: <a href="http://www.chicagointerhandball.com/" rel="nofollow">http://www.chicagointerhandball.com/</a> got a few other unrelated problems to work out. but i just followed the tutorial. you might want to give the menu and it's container an id: <pre><code>//Update Menu Arguments - i am limiting the depth to 1 until i figure out how to handle sub menus function child_nav_args($args){ $my_args = array ( 'depth' => 1, 'menu_id' => 'primary-menu', 'menu_class' => 'hover sf-menu', 'container_id' => 'primary-menu-container' ); $args = array_merge($args,$my_args); return $args; } add_filter('thematic_nav_menu_args','child_nav_args');</code></pre> the pertinent js: <pre><code>/* prepend menu icon */ $('#primary-menu-container').prepend('<div id="menu-icon">Menu</div>'); /* toggle nav */ $("#menu-icon").on("click", function () { $("#primary-menu").slideToggle(); $(this).toggleClass("active"); });</code></pre> then it is just a matter of styling the 2 menus differently. but at a base you will need: <pre><code>#primary-menu { display: none; margin-bottom: 10px;} @media only screen and (min-width: 768px) { #primary-menu { display: block !important; } #menu-icon {display: none;} }</code></pre> helgatheviking on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26272 Wed, 11 Apr 2012 20:43:55 +0000 helgatheviking 26272@http://themeshaper.com/forums/ i've been working on this today. it wasn't that hard.... just a little jquery slideToggle action. styling it to look sharp is taking me forever, of course. see this tut: <a href="http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial" rel="nofollow">http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial</a> and i'll post again when i've finished updating the handball site w/ its new menu look bogh on "Responsive Menu" http://themeshaper.com/forums/topic/responsive-menu#post-26258 Wed, 11 Apr 2012 14:24:21 +0000 bogh 26258@http://themeshaper.com/forums/ I am trying to avoid this option you shown, and to get closer to the ones on those sites. It's so annoying when I want to achieve something and I don't know JS :)) But, I am getting closer though, I will not rest until I don't have the perfect responsive menu, like on themefit.com :D Please let me know if you have more ideas.