-
Posts
-
I have seen a lot of people with this problem and a lot of answers.
I tried to see which was best for me but with so many I got confused. Could you let me know what would help me best?
I just want the main menu not to show on ipad portrait mode and for it to show the load-out menu. At the moment it shows both with the text overlapping under the logo and under the load-out menu icon.
Hi,
Please add this on your custom.css or Quick CSS:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 12px;
}
}This will decrease the padding and the font size on iPad.
Note: The menu overlap is still not fix on instance when you rotate the iPad from landscape to portrait view without refreshing the page.
Regards,
Ismael
Hi artistic24459,
See if this post helps you: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320
You can change the pixel width the theme switches to the mobile menu in both the javascript file and the new css and play with a number that works for you. So going up to say 980px would make it switch on just about all tablets and mobile devices but also some smaller laptops/netbooks.
Regards,
Devin
I will try. Do you have to change the javascript and the css to get it to work?
This is what I’m trying to do:
http://www.chriswardphotography.com/test-area/examples/example3.jpg
Top is what I have, bottom version is what I’m trying to get.
Do you mean change both to 900
var menu = header.find('.main_menu ul:eq(0)'),first_level_items = menu.find('>li').length,
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 900;
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 900;
header.addClass('mobile_menu_tablet');
}
I have tried changed each one and when I make my browser it still shows the menu for too long. I need it to switch earlier so its just the slide out menu showing for the ipad portrait.
Could you explain what each number is for (767, 989)?
Sorry js is not my strong point :-(
Hey,
Please replace this with code:
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 900;with:
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 1024;and this:
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 900;
header.addClass('mobile_menu_tablet');
}with
if(first_level_items > 7 && !bottom_menu)
{
switchWidth = 1100;
header.addClass('mobile_menu_tablet');
}Remove browser cache the reload the page.
Don’t forget to add this css code on your Quick CSS:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 12px;
}
}Regards,
Ismael
Hi Ismael,
great, thanks for that!
I have entered as mentioned above to http://www.musikzentrale.net, but here is what happens now:
resizing the browser window below 1030px both now, the main menu AND the mobile menu, show up. when i go under 1013px in width, the logo vanishes, but still both menus are there, main and mobile. The main menu disappears when i go below ~780px
here is my setting, anything wrong with that?
IN AVIA.JS
‘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 = 1024;
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 1100;
header.addClass(‘mobile_menu_tablet’);
}’
AND IN CUSTOM CSS:
‘@media only screen and (max-width: 1100px) and (min-width: 1024px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 12px;
}
}’
Thanks for your help
Regards, SEbastian.
PS: I am not really aware of what i am doing with those entries, it is more a guessing thing ;-)
Sorry have not had time to update and try it out yet so please keep it open for another few days, sorry.
Hi,
Please decrease the switchWidth value. I think the css code will work:
@media only screen and (max-width: 1100px) and (min-width: 1024px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 12px;
}
}Like I said, there is still no fix on instances when you rotate the iPad from landscape to portrait view without refreshing the page.
Regards,
Ismael
I’m a little confused now. Do I still need to change the avia.js or just add the CSS above?
I have not had time to try the code out before yet but I have tomorrow on the theme so will try it then.
Hey,
Add the css then change the switchWidth value. Please experiment with it. It may depend on the number of menu items and the width of the screen.
Regards,
Ismael
Hey,
Alright. The rotation on ipad hasn’t been fix as far as I know. I hope it helps you somehow.
Regards,
Ismael
Just make sure that you modify the css to hide the menu at the same pixel size that you show the mobile menu. Both code samples are here: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320
- The topic ‘Menu overlap on ipad portrait’ is closed to new replies.