Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #641117

    I have 2 issues with my website:

    1) In the mobile view (iphone 5 in this case), the logo is overlapping a button you guys helped me place at the top of the header. I’ve attached an image to show you what is wrong, http://i.imgur.com/8i7kgro.png. I need the logo to be moved below the button so both can be seen clearly.

    2) In the tablet view (ipad in this case), the mobile menu is overlapping the button, and so I need the menu moved over, so they both can be accessed easily. Again, I’ve attached an image of what is happening, http://i.imgur.com/iYFNLTQ.png.

    Thanks for your help!

    #641821

    Hey advteksol,

    Thank you for using Enfold.

    1.) Please add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    #header .avia-button-left {
        left: 0;
        bottom: -40px;
    }
    
    #header_main {
        padding-bottom: 50px;
    }
    }

    2.) Use the following css code:

    @media only screen and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
        display: block;
        top: 100px;
    }
    }

    Best regards,
    Ismael

    #642120

    The solution for 2 works great, however, there is no effect when applying solution 1 – the logo still covers the button in the mobile phone view. I left both additions in the Quick-CSS area for you to view.

    Thanks.

    #642870

    Hi,

    As per your request we have moved the logo below the button in mobile view. please refresh and review the site.

    Best regards,
    Vinay

    #645523

    So to solution 1 you added:

    .av-logo-container {
    padding-top:54px;
    }

    Works! Thank you.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Problem with Header in Mobile/Tablet Views’ is closed to new replies.