-
Posts
-
How do we get Responsive Header Main Menu on a horizontal tablet ( IE – that is in a landscape position ) ?
We have about ten links in our Main header.
So when an iPad is horizontal we no longer get the “Responsive Header Main Menu” button.
Which then the ten links bleed right into the logo.
How do we adjust this for a horizontal iPad ( IE – tablets that are in a landscape position ) ?
Thanks in advance.
Hi All,
You can follow these changes to alter the width at which the menu switches: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320
The pixel width for tablets can be found here: http://screensiz.es/tablet
Regards,
Devin
Did just as you asked and did not get any results.
Can you please submit a screen shot for the “Quick CSS” and the “avia.js” file so that we may see the exact pixel dimensions to use.
We are using an iPad 2.
Thanks in advance.
1) If we hold the iPad 2 in “landscape” position
AND…
… set the pixels at 1025 within both the “Quick CSS” and the “avia.js” file
The Menu Links disappear but there is no Menu Button
===============================
2) If we hold the iPad 2 in “landscape” position
AND…
… set the pixels at 1023 or less within both the “Quick CSS” and the “avia.js” file
The Menu Links appear.
==============================
Can you please submit a screenshot for both the “Quick CSS” and the “avia.js” file so that we may see the exact pixel dimensions to use.
We are using an iPad 2.
Thanks in advance.
OK.
We got the Responsive menu to show up by changing LINES 74 – 93 of the “avia.js” file to :
===================================================================
//
// responsive menu function
//
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 = 1025; //This was 767 but changed it to 1025 so that tablets in landscape position would see responsive Menu Button
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 1025; //This was 989 but changed it to 1025 so that tablets in landscape position would see responsive Menu Button
header.addClass(‘mobile_menu_tablet’);
}
If we hold the iPad 2 in “landscape” position ….
The “Responsive Menu Button” now appears
BUT….
1) When you click on it, only the “Close” button appears.
2) The menu only appears by turning it FROM landscape to vertical
3) And the menu will not scroll all the way down so that we can see all the links
====================
The good news is that it works fine if we are ORIGINALLY holding the iPad 2 vertical.
Look forward to your assist.
Please let s know if we have to adjust anything in the “layout.css” file starting around LINE 2705 .
If yes, please let s know exactly what needs to be pasted or changed there.
OK.
Think we got it fixed.
Went to the “layout.css” file at LINES 2952 – 2954 and made the following change to the max-width
@media only screen and (max-width: 1025px) { /* This was 989px . It was changed o the Responsive Menu would show on TABLETS held in landscape position */
#mobile-advanced{display:block;}
}
===============================
Please let us know if this is the correct way. Or whether it will cause conflicts.
If this is correct, will you please consider making the changes in your next update ?
In other words, will this cause laptops and desktops that have resolutions set at 1024px wide to see the “Responsive Menu” ?
If yes, is there a workaround to make it JUST for tablets ?
We brought down the max-width to 1024px
=======================================
@media only screen and (max-width: 1024px) { /* This was 989px . It was changed o the Responsive Menu would show on TABLETS held in landscape position */
#mobile-advanced{display:block;}
}
=======================================
1) Will this cause laptops and desktops that have resolutions set at 1024px wide to see the “Responsive Menu” ?
2) If yes, is there a workaround to make it JUST for tablets ?
This will cause any device that has less than 2024 to display the responsive menu.
This is the complication that we face when creating websites and trying to make them usable for everyone on all devices (responsive). The best solution with the fixed header and menus is to make the menu simplistic and the sub menus have the multi tiered depth.
If that isn’t an option, the above: change the width at which the mobile menu shows up, is the second best option.
Regards,
Devin
- The topic ‘Need the Responsive Header Main Menu for horizontal tablets’ is closed to new replies.