Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 25, 2019 at 7:44 pm #1071441
    Arcatech

    Hello There,
    I have a problem with the enfold menu resizing on mobiles and tablets.
    Check the pics attached:
    http://it.tinypic.com/r/i6mlmu/9
    http://it.tinypic.com/r/29wsao/9
    http://it.tinypic.com/r/2efnyi0/9
    http://it.tinypic.com/r/ekos46/9

    It is like misplaced due to the presence of the social icons.

    I have tried moving it with some CSS add but it is like not loaded
    .av-amburger-inner {float:left;margin-left: 200%!important;}

    February 28, 2019 at 11:18 am #1072597
    Ismael

    Hey Arcatech,

    Thank you for using Enfold.

    You can use this css code to move the menu container to the left side of the logo and keep the social icons where it’s currently at.

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    top: 0;
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

.responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
    display: block;
    position: absolute;
    margin-top: -15px;
    right: 0;
    left: auto;
}

.responsive .logo {
    float: left;
    z-index: 200;
    position: relative;
}
}

    This is how the header would look after adding the css code: https://imgur.com/a/BdZoN9n

    Best regards,
    Ismael

    February 28, 2019 at 6:33 pm #1072697
    Arcatech

    Thank you BUT that works just for tablets, not on mobile :-(

    February 28, 2019 at 9:31 pm #1072767
    Jordan Shannon

    Hi,

    Try adding this as well:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    top: 0;
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

.responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
    display: block;
    position: absolute;
    margin-top: -15px;
    right: 0;
    left: auto;
}

.responsive .logo {
    float: left;
    z-index: 200;
    position: relative;
}
}

    Best regards,
    Jordan Shannon

    March 4, 2019 at 7:16 pm #1074481
    Arcatech

    I tried that on my own already but the result looks awful anyway: http://it.tinypic.com/view.php?pic=2el6ycx&s=9

    March 5, 2019 at 4:54 am #1074638
    Ismael

    Hi,

    How would you like the header to display on mobile view? Please provide a screenshot using imgur or dropbox.

    Best regards,
    Ismael

    March 5, 2019 at 3:26 pm #1074910
    Arcatech

    Like you made it with this code on the tablet is just perfect, but as you can see on mobile the logo is right on the menu…can you just correct that?

    March 8, 2019 at 10:34 am #1076280
    Ismael

    Hi,

    That layout may not be possible on mobile view because the header space is quite limited. Would you consider removing the social icons on smaller screens?

    @media screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
    display: none !important;
}
}

    Best regards,
    Ismael

    March 8, 2019 at 7:03 pm #1076439
    Arcatech

    Hello Ismael,
    That is definetly not a solution. There should be a way to move the icon once clicked!
    Social are too important to be hidden!

    March 11, 2019 at 12:07 pm #1077288
    Ismael

    Hi,

    Would you like to move the social icons inside the mobile menu container? This script should help.

    // https://kriesi.at/support/topic/social-icons-in-mobile-menu-3/#post-835215

    Best regards,
    Ismael

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