Viewing 30 posts - 1 through 30 (of 34 total)
  • Author
    Posts
  • #600908

    Hey guys,

    I already reduced header size on iPhone and it worked. I tried to use the same code to do that on the tablet (iPad) – the header did reduce, but i’m getting a weird duplicated line under header and when i call the mega menu, all the sub-items are shifted up. Link (go on tablet): mete.photography/projects Here’s the code I used:

    /* reducing header on iPad */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    #menu-item-search {top: -10px !important;} 
    
    .avia-menu-text { position: relative; top: -12px; }
    
    .container.av-logo-container { max-height: 59px; }
    
    #top #header .avia_mega_div { max-width: 200px;}
    
    .avia-menu.av_menu_icon_beside {
    padding-right: 15px !important;
    margin-right: 15px !important;
    border-right-style: none !important; }
    }

    Please let me know if I should change // add something. I tried lots of stuff from support forums and haven’t found a fix yet. Thank you in advance for the help.

    • This topic was modified 8 years, 9 months ago by mepho.
    #600977

    Hey mepho!

    Please add the below CSS in Quick CSS

    #header .container_wrap {
        border-top-width: 0px!important;
    }

    Best regards,
    Vinay Kashyap

    #600979

    Hey Vinnie,

    Thanks for a quick response. Unfortunately, the code didn’t work. Same issue, nothing changed.

    #600981

    Hi!

    We need to take a closer look please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    Best regards,
    Vinay Kashyap

    #600984

    Here you go

    #600985

    also, i just updated to 3.5, and something happened to my instagram icon in header (on desktop) – it shifted to right. If you could take a look as well. Thank you.

    #601007

    Hi!

    We added the below code to fix the issue

    #main > .container_wrap {
        border-top-width: 0px!important;
    }

    The instagram icon looks fine on my end please share a mockup what you need it to look like? upload to imgur and share the link here please.

    Cheers!
    Vinay Kashyap

    #601169

    Hey Vinnie,

    Thanks for doing this. You did remove the duplicated line, but the weird padding between header and main content is still there. Additionally, the submenu items are still shifted up. Here’s the screenshot screenshot

    • This reply was modified 8 years, 9 months ago by mepho.
    #602474

    Hey,

    So should I expect any help on this? The issue wasn’t really fixed. Thank you.

    #603143

    Hey!

    You have following code in Quick CSS

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    .avia-menu-text {
        position: relative;
        top: -12px;
    }}

    Please change it to following

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    #avia-menu > li > a > .avia-menu-text {
        position: relative;
        top: -12px;
    }}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Regards,
    Yigit

    #603206

    Hey Yigit!
    Thanks, that fixed the issue with the shifted submenu items.
    However, the menu still pops up at the distance from the actual menu: screenshot

    And there is padding between the main content and the header, which is suspect is the same issue

    • This reply was modified 8 years, 9 months ago by mepho.
    #603211

    Hey!

    I tried resizing browser window but i cannot reproduce the issue on my end. Which OS and browser are you using and what is the screensize?

    Best regards,
    Yigit

    #603217

    This issue appears only on tablet. Specifically I’m using iPad Mini Retina running iOS 9.2, and the browser is Safari.

    #603238

    Hey!

    Using Safari on OSX 10.11, i still could not reproduce the issue. I will ask my teammates to check your website on an actual ipad. Please kindly wait to hear from them.

    Best regards,
    Yigit

    #603239

    Thanks Yigit! The issue is tablet-specific, so that will be helpful. Thank you for your help

    #603898

    Hey!

    This issue is happening in tablets while viewing in landscape mode… with resolution approx 1204px wide some media queries need to be adjusted to the same width and we need to look at the css. The login credentials you’ve provided do not work please send us working login credentials with user role as ‘administrator’ and permission to disable all plugins and add css if necessary to resolve the issue.

    Cheers!
    Vinay

    #604754

    Hey thanks for replying! Here you go

    #604943

    Hey!

    We have added the below css in Quick CSS please review the site now.

    /* Tablet fix*/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .avia_mega1 {
      margin-top: -22px!important;
     z-index:99999!important;
    }
    }

    Cheers!
    Vinay

    #604947

    Hey Vinnie,

    This fixes the issue only in the case when you press the items in the main menu – the blue underline is right under header then. However, the padding between the main content area and the header is still there. And when you are on one of the main pages, the blue line under the menu item is still shifted down. So unfortunately, this didn’t fully fix the issue. Thank you for your ongoing support though, I appreciate it and it’s much needed.

    #606115

    Hey!

    try this code instead:

    @media only screen and (min-width: 768px) and (max-width: 1024px) { 
    #top #header .avia_mega_div {
    top: 80px;
    }}
    

    Cheers!
    Andy

    #606211

    Hey Andy,

    Unfortunately, this didn’t work.

    #607110

    Hey!

    Did you adjust the top value? Please try this:

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    #top #header .avia_mega_div {
        top: 60px !important;
    }
    }

    Cheers!
    Ismael

    #612968

    Hey Ismael,

    I tried to adjust the value. This css shifts up the pop up menu, but doesn’t fix the issue. The problem still stands. See for yourself:
    Header issue

    • This reply was modified 8 years, 8 months ago by mepho.
    #615663

    Hi!

    Sorry for the delay. We checked the mega menu and it looks ok now. Is it fixed?

    Regards,
    Ismael

    #616819

    Hi Ismael,

    On my iPad the issue still stands.

    #618919

    Hi!

    Please add this inside the css media query for tablet or iPad view:

    #top #header_main > .container .main_menu ul:first-child > li > a {
        height: 59px !important;
        line-height: 59px !important;
    }

    Cheers!
    Ismael

    #619033

    Hey Ismael,

    This seems like a step in the right direction… However, now the menu items shifted up, and the padding between main area and header still remains. It’s just weird to me that it was so easy to do on iPhone and on iPad it’s taking me months to fix. Screenshot: Screenshot

    #620720

    Hey!

    Did you insert the latest css code inside the css media query for iPad?

    Best regards,
    Ismael

    #625174

    Hey Ismael,

    Sorry for the wait. As of now, I put the code in the iPad media query and adjusted the value to 78px. Now everything is correct except for the padding between header and main content area. We’re getting closer to resolving this! Thank you for the ongoing support – couldn’t do it without you.

    #626308

    Hi,

    I checked link in question, but can’t see any content on this page. Its pretty much empty. Please make it easy for us to follow this thread by always providing us precise links to the elements in question.

    Best regards,
    Andy

Viewing 30 posts - 1 through 30 (of 34 total)
  • You must be logged in to reply to this topic.