Tagged: , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #260546

    Now that the drop down menu is gone, the little icon is covering up part of my header when displayed on mobile.

    Site is http://www.AdamPervez.com

    Can the menu icon be moved somewhere else, or to the right of the logo or something? Thanks!

    #260778

    Hey happinessplunge!

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

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto !important;
    margin-top: 5px!important;
    }}

    then go to Enfold theme options > Header Layout > Mobile Menu > Header Mobile Menu activation and choose 990px
    Cheers!
    Yigit

    #260926

    Thanks for your help and for the code.

    I added the code to QuickCSS and changed from 768 to 990px and the result is exactly the same as you can see here: http://mobiletest.me/iphone_5_emulator/#u=http://adampervez.com

    Any other thoughts?

    #260937

    Hi!

    I have just checked your website on my iphone 4 and this is how it looks on my end – http://i.imgur.com/mftx74r.png
    Please flush browser cache on your mobile device

    Best regards,
    Yigit

    #260971

    Thanks! I cleared the cache for my browser (Chrome for Android) and here’s how it looks on my end. Same problem.
    [IMG]http://i.imgur.com/aLQytTd.png[/IMG]

    Also, the social icons are messed up at the top on both mobile and desktop browsing.

    Any further thoughts?

    Thanks,

    #260973

    Hey!

    I believe you are still seeing cached version. However you can decrease max-width value in code i posted here to make your logo smaller – http://www.kriesi.at/support/topic/menu-covers-logo-on-mobile/#post-260778

    Regards,
    Yigit

    #261034

    Hi Yigit,

    I tried loading my site on a different phone, one that has never visited my site. Same problem remains. I installed Firefox for my phone and it also showed the same problem. At least the social icons are displaying correctly.
    On a Nexus 5 using Firefox
    screenshot

    On an iPhone 4s using Safari
    http://imgur.com/5PWHlRG

    #261035

    On a Nexus 5 using Firefox image that works this time:
    http://imgur.com/qlV47PK

    #261251

    Hey!
    Have you tried adjusting max-width value i posted here – http://www.kriesi.at/support/topic/menu-covers-logo-on-mobile/#post-260778 ?
    I still see your logo fine on my iphone 4

    Best regards,
    Yigit

    #261514

    Yes, I tried adjusting the max width value as well as changing the max width to 50% for example. Still not working on a Nexus 5, iPhone 4s, and emulators like this.

    If it can’t be fixed I can live with that. I just wish the drop down menu still existed.

    #261935

    Hey!

    I have asked @josue to take a look at your website on his mobile device. Problem seems to be fixed on my end, if it works fine on his end also, there is not much we can do as long as we cannot reproduce the issue.
    Let us wait for his answer

    Cheers!
    Yigit

    #262703

    Ok, let’s see what @josue sees then. Thanks again for your help!

    #263081

    Hi!

    Thank you for using the theme!

    I checked the website on Chrome Windows 8, resize the browser screen and the logo is very small. Did you modify the css codes suggested above?

    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto!important;
    margin-top: 5px!important;
    }
    }

    If that doesn’t work, please add this below the code above:

    @media only screen and (max-width: 767px) {
    .avia-android .logo a, .avia-android .logo img, .avia-iphone .logo a, .avia-iphone .logo img {
    max-width: 43%;
    height: auto!important;
    margin-top: 5px!important;
    }
    }

    Cheers!
    Ismael

    #264321

    Thanks so much, Isamel!

    That fixed it. Great news!

    Last thing now. Is there a way to change the total height of the header on mobile then? I tried using the code below but it doesn’t work.

    
    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 85%;
    height: auto!important;
    margin-top: 5px!important;
    }
    #header_main {height: 100px !important;}
    }
    

    Thanks!

    #264325

    Hey!

    Seems like you have already figured it out – http://i.imgur.com/hpyLt1R.png
    Let us know if you have any other questions or issues

    Cheers!
    Yigit

    #265020

    Thanks! I was thinking of changing my logo, that’s why I was asking about the height thing. The part I added “#header_main {height: 100px !important;}” doesn’t seem to impact the header. Should the code be different?

    Thanks.

    #265525

    Hi!

    With media queries it should work. So the code should be as following

    @media only screen and (max-width: 480px) {
    #header_main {
    height: 120px!important; }}

    Please note that currently you have following code added in Quick CSS

    #header_main {
    height: 73px!important;
    margin-top: -10px!important;
    margin-bottom: -10px!important;
    }

    and that would stop new code from applying because of !important rule you have there

    Cheers!
    Yigit

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.