-
AuthorPosts
-
May 15, 2014 at 7:37 am #265148
Hi !
I have just uploaded Enfold last version. Before installing it, I was about to adapt the js. file as I always do for each update, with some special code I need to change for the responsive menu, around line 300. But this time the js. file is really different and I’m not skilled enough to know what I should do… Can you help me please ? I need to know what I should change now on the new js.file and where… :)
Thank you so much.
Best regards,Marie
website : http://www.auxigene.netHere is the js.file code I always change (cf SwitchWidth / twice -> : 989 instead of 767)
function avia_responsive_menu() { var win = $(window), header = $('.responsive #header'); if(!header.length) return; var menu = header.find('.main_menu ul:eq(0)'), first_level_items = menu.find('>li').length, bottom_menu = $('html').is('.bottom_nav_header'), switchWidth = 989; if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu) { switchWidth = 989; header.addClass('mobile_menu_tablet'); }
Also, for info, code in my quick css regarding responsiveness also, in case I should also change something there…
Thank you again !/* Smaller font size on slider iPad iPhone */ @media only screen and (max-width: 767px) { .avia-caption .avia-caption-title { font-size: 10px; } } /* Responsive menu TABLET */ @media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .mobile_menu_tablet .main_menu { display: block; } } /* Menu and logo not one into another */ @media only screen and (min-width: 767px) and (max-width: 989px) { .main_menu ul:first-child > li > a { font-size: 11px; } .responsive .main_menu ul:first-child > li > a { padding: 0 5px; }} /*Hide the menu*/ @media only screen and (max-width: 990px) { .responsive #header .main_menu ul { display: none; } } /*Title Container breadcrumb - Responsive*/ @media only screen and (max-width: 767px) { .responsive .title_container .breadcrumb { top: 12px; } #top .title_container .container { padding: 0px 0px 6px 0px; min-height: 90px; }} /*Decrease the padding between menu items on screens smaller than 1140px to stop menu from overlapping the logo*/ @media only screen and (max-width: 1140px) { .main_menu ul:first-child > li > a { padding: 0 7px!important; }}
May 15, 2014 at 7:40 am #265149Sorry I forgot to precise that the actual Enfold running for this site is the 2.6.3 version (not 2.7).
Thanks. MarieMay 15, 2014 at 9:02 am #265184Hey!
I think you don’t need to change the code since the 2.7.x update – Kriesi added a new option to the theme framework which enables you to select a higher switch width value. Go to Enfold > Theme Options > Header Layout > “Mobile Menu” tab and select “Header Mobile Menu activation” – “Activate for Smartphones & Tablets”.
Best regards,
PeterMay 15, 2014 at 9:45 am #265198Thank you very much Peter. I uploaded 2.7.1 without touching the js.file this time and it seems to work. But “Activate for Smartphones & Tablets” was already selected in “theme options / header layout / mobile menu”… Is it supposed to be selected by default and are you sure this is new since 2.7 ? Anyway… great if it works this way… Easier and faster for next updates :)
Best regards,
MarieMay 15, 2014 at 9:48 am #265200Hey!
Yes, but maybe Kriesi set the default value to “Activate for Smartphones & Tablets” ;)
Best regards,
PeterMay 15, 2014 at 9:52 am #265204OK ;)
Thanks again,Marie
-
AuthorPosts
- The topic ‘Enfold Update / js. file’ is closed to new replies.