Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 19, 2014 at 2:22 am #225898
    wizbiz

    Hi guys!

    I used to be able to display the regular menu on ipad using this code, posted in some support posts here:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 6px;
font-size: 10px;
}

.main_menu {
margin-right: -20px;
}

.main_menu ul:first-child > li > a {
padding: 0 11px;
}

.logo img {
width: 200px;
}
}

    But now it’s not working anymore. When loading the page, the menu appears for a second, and then disapear behind what looks like a white layer.

    Any idea how to resolve this?

    Thanks!

    February 19, 2014 at 2:32 am #225901
    Devin

    Hey wizbiz!

    What is the url for your site?

    Cheers!
    Devin

    February 19, 2014 at 2:39 am #225905
    wizbiz
    This reply has been marked as private.
    February 19, 2014 at 3:03 pm #226194
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
}}

    Best regards,
    Yigit

    February 19, 2014 at 3:52 pm #226241
    wizbiz

    Hi,

    Thanks, but this displays the responsive menu when seen on tablet. I want to display the regular menu on tablet.

    To sum things up, I want to display:

    – the regular menu over 989px,
    – the responsive menu under 767px,
    – the regular menu with adapted logo width, font size and padding for everything between 768px and 988px.

    Basically what I used to do before, using the code I gave you earlier.

    Cheers.

    February 20, 2014 at 5:54 am #226605
    Ismael

    Hey!

    Edit js > avia.js, find this code on 307:

    if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
    	{
    		switchWidth = 989;
    		header.addClass('mobile_menu_tablet');
    	}

    Replace it with:

    if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
    	{
    		switchWidth = 767;
    		header.addClass('mobile_menu_tablet');
    	}

    This will force the theme to only show the responsive menu on screen sizes lower than 768px.

    Best regards,
    Ismael

    February 20, 2014 at 11:35 am #226694
    wizbiz

    Thanks, with the modified java and the custom css posted by yigit this worked. Only problem left is that the size of the text won’t reduce like it used to.

    Here is the custom css I’m using:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
padding: 0 6px;
font-size: 10px;
}

.main_menu {
margin-right: -30px;
}

.main_menu ul:first-child > li > a {
padding: 0 11px;
}
}

    The “font-size” doesn’t apply. Any idea what I’m doing wrong?

    Cheers!

    February 20, 2014 at 3:39 pm #226830
    Ismael

    Hey!

    Please try to add !important beside the css value:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
padding: 0 6px !important;
font-size: 10px !important;
}

.main_menu {
margin-right: -30px;
}

.main_menu ul:first-child > li > a {
padding: 0 7px !important;
}
}

    Best regards,
    Ismael

    February 20, 2014 at 6:48 pm #226952
    wizbiz

    Thanks, but unfortunately this didn’t change anything.

    Cheers.

    February 21, 2014 at 6:49 pm #227607
    Yigit

    Hi!

    Please try adding following code to Quick CSS 

    @media only screen and (max-width: 989px) and (min-width: 768px) { 
.main_menu ul:first-child > li > a { font-size: 10px; }}

    Cheers!
    Yigit

    February 21, 2014 at 7:20 pm #227622
    wizbiz

    Thanks for your answer.

    If I use this CSS, the previous issue comes back, meaning that when loading the page, the menu appears for a second, and then disapear behind what looks like a white layer.

    But for the second it does appear, I can see the font parameter applied properly.

    Cheers.

    February 21, 2014 at 7:23 pm #227623
    wizbiz

    Ok, I managed to make it work.

    The white layer issue is gone.
    On desktop, the header shows normally with a resolution over 989px.
    On tablet (between 768px and 989px), the regular menu shows, with smaller font, smaller logo, and reduced padding. Tested on ipad 2 and ipad mini.
    On smartphone (under 768px), it switches to the responsive menu.

    Here is the code:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .mobile_menu_tablet .main_menu {
display: block;
}

.main_menu {
margin-right: -30px;
}

.main_menu ul:first-child > li > a {
font-size: 10px;
}

.logo img {
width: 250px !important;
}
}

    I ended up removing the padding attributes, as it didn’t seem to make any difference.

    Thank a lot for your help!

    • This reply was modified 10 years, 9 months ago by wizbiz.
  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Enfold: Menu problem on ipad’ is closed to new replies.