Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 1, 2016 at 12:55 am #655491
    Tobias-B-Conrad

    above and below the mobile menu icon. Asked a lot but not a clear solution i found.

    i tried this, but it does not move the icons to the right
    /* search icon */
    @media only screen and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet .main_menu .avia-menu ul #menu-item-search{
    display: block;
    position: absolute;
    top: 10px;
    right: 20px !important;
    }

    July 1, 2016 at 7:51 am #655554
    Vinay

    Hey Tobias-B-Conrad,

    There is not enough space to fit everything in one line, we need to move the icons below the logo to do so Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 600px) {
.responsive #header_main .inner-container, .responsive .main_menu {
    min-height: 60px;
}
#top #menu-item-search {
    top: 40px;
}
.cart_dropdown_first {
    position: absolute;
    top: 40px;
    left: -110px;
}
#advanced_menu_toggle, #advanced_menu_hide {  
    margin-top: 6px;
    margin-right: 20px;
}
}

    Best regards,
    Vinay

    July 1, 2016 at 10:19 am #655626
    Tobias-B-Conrad

    thank you very much that helped a lot.
    to use the head space more i thought of:
    ……..(search icon)
    logo (menu icon)
    ……..(cart icon)

    July 2, 2016 at 5:38 am #655995
    Rikard

    Hi,

    That’s a good idea but I think you would still have to use two lines, otherwise the items will end up being too small. Are you ok with your current solution though?

    Thanks,
    Rikard

    July 2, 2016 at 6:43 am #656020
    Tobias-B-Conrad

    Not okay. i changed the figures to get all in line to:
    /*mobile: search, cart icon under the logo*/
    @media only screen and (max-width: 600px) {
    .responsive #header_main .inner-container, .responsive .main_menu {
    min-height: 60px;
    }
    #top #menu-item-search {
    top: 30px;
    }
    .cart_dropdown_first {
    position: absolute;
    top: 30px;
    left: -120px;
    }
    #advanced_menu_toggle, #advanced_menu_hide {
    margin-top: 6px;
    margin-right: 20px;
    }
    }
    I checked with the responsive view in safari: alt cmd + r and firefox alt + cmd + m
    it was viewed nice.

    So now i opened the webpage on mobile firefox and chrome on android and see it is not in line.
    Then i switched to chrome desktop view (also a responsive view) and got all icons in line.
    In firefox i did not get them in line.

    So i altered CSS to get it nice on mobile browser (not the mobile desktop view inside the desktop browser).
    /*mobile: search, cart icon under the logo*/
    @media only screen and (max-width: 500px) {
    .responsive #header_main .inner-container, .responsive .main_menu {
    min-height: 60px;
    }
    #top #menu-item-search {
    top: 55px;
    }
    .cart_dropdown_first {
    position: absolute;
    top: 58px;
    left: -115px;
    }
    #advanced_menu_toggle, #advanced_menu_hide {
    margin-top: 6px;
    margin-right: 20px;
    }
    }
    Result: mobile view on firefox desktop (mac): http://awesomescreenshot.com/06b5zsfed5
    So how get them inline in every browser?

    Same with the @media only screen and (max-width: 500px):
    On mobile (horizontal) 500px is nice. On desktop it needs 600px to have the logo inline and not overlapping.
    I use the stretched layout!

    PS: Is it possible to get the logo in the middle and alter the size?
    When the icons are below the logo it should be possible.

    PPS: maybe possible have a default solution for all users directly in the enfold settings.
    place search-, cart- and the mobile menu button-icon in one line below the logo.

    July 2, 2016 at 7:15 am #656036
    Vinay

    Hi,

    Please adjust height and line height to the cart and search icon in the mobile view to fix this issue.

       #top #menu-item-search a , #menu-item-shop .cart_dropdown_link {
     height: 83px!important;
     line-height: 85px!important;
}

    Best regards,
    Vinay

    July 2, 2016 at 7:49 am #656045
    Tobias-B-Conrad

    thats it. thank you very much.
    possible to center/resize/fit the logo also?

    July 4, 2016 at 3:13 pm #656608
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
    width: 100%;
}}

    Best regards,
    Yigit

    July 4, 2016 at 3:41 pm #656625
    Tobias-B-Conrad

    nice thank you very much. case closed.

    July 4, 2016 at 3:57 pm #656636
    Yigit

    Hey!

    You are welcome, glad we could help! Let us know if you have any other questions or issues :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘mobile view: search icon and cart icon should on the right’ is closed to new replies.