Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 26, 2016 at 1:10 pm #638680
    mike.rav

    Hello,

    I have a couple of issues that i need your help with.

    1. I am using the “Fullwidth Sub Menu” element with the “Display a button to open menu” option enabled. I have noticed that on IPAD, it doesnt show the item and instead displays all the items. I suppose this is due to the resolution. Can you let me know how to make the button appear on IPAD?

    2. I am using the header “logo left, menu below”, header social icons “display in area” and i also have transparency turned on. On mobile the social icons are not displayed. Is there any way to make them display, like lets say above logo or something?

    Thanks in advance.

    May 27, 2016 at 5:39 am #639084
    Rikard

    Hi george,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    May 27, 2016 at 7:30 am #639133
    mike.rav

    Hey thanks for the response.

    Added in private content.

    May 28, 2016 at 3:32 am #639626
    Ismael

    Hi,

    Thank you for the info. Have you tried setting the “Mobile Menu Display” to display a button on tablet and phone screens?

    Best regards,
    Ismael

    May 30, 2016 at 7:14 am #640150
    mike.rav

    Yes, i said that

    May 30, 2016 at 2:15 pm #640368
    Andy

    Hi,

    please use different tickets for different questions.

    1.) About which button are you talking about? I can’t see any difference between desktop and iPad. Please use screenshots to highlight your intentions and to make things clear to us. Use imgur.com or dropbox.

    2.) Use this code inside Quick CSS field:

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
display: block;
}}

    Best regards,
    Andy

    May 30, 2016 at 2:41 pm #640404
    mike.rav

    Hey,

    I will try to be more clear with the screenshots.

    I added everything in Private Content

    Screen 1: This is the way it appears now
    Screen 2: This is how it appears after i add the following CSS you suggested

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
display: block;
}}

    Screen 3: I have added 2 screens for you, one on initial state and one when scrolled. As you can see the “Fullwidth sub menu” is not grouped into the “Menu” on IPAD. On other small resolutions it is grouped correctly. Thats why i mentioned that is an issue with the resolution. Since my menu has 9 links it causes this issue.

    May 31, 2016 at 12:08 am #640641
    Vinay

    Hi!

    To display the social icons in mobile menu copy the code in this link http://pastebin.com/AkEACX3Q to functions.php

    and add this css to quick css

    /* Mobile menu social icons */

#mobile-advanced [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
}

#top .social_bookmarks li a:before, #mobile-advanced .social_bookmarks li a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border:0!important;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
}

#mobile-advanced .social_bookmarks li > a:before {
   font-size: 20px;
}

#mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before { display: none !important; }

    and remove the css below to display the icons in header

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
display: block;
}}

    Cheers!
    Vinay

    May 31, 2016 at 8:56 am #640749
    mike.rav

    Hello,

    Thanks for the reply. However it didnt work. Nothing happened. The only thing i noticed is that the bullet arrows were removed from mobile menu. If displaying the social icons is not possible in header, can they be added inside the mobile menu?

    Also concerning the “Fullwidth submenu” do you have any suggestion?

    June 1, 2016 at 5:40 am #641213
    Ismael

    Hi,

    Did you check “>” symbols in the css code? Are they converted to something else? Please copy the code directly from this forum, not from your email. If you don’t mind, please post the login details here so that we can check dashboard.

    Best regards,
    Ismael

    June 1, 2016 at 7:34 am #641279
    mike.rav

    Hello,

    I have added the info to private content.

    June 2, 2016 at 7:36 am #641879
    mike.rav

    If possible, can you please elaborate on the IPAD issue first, since its the one i am expecting to function so i can put my site live. The other one i can deal with it later.

    June 3, 2016 at 4:06 am #642344
    Ismael

    Hi,

    1.) We added the following code in the Quick CSS field to force the full submenu element to switch to mobile menu on tablet view:

    @media only screen and (max-width: 989px) {
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
    display: inline-block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu {
    display: none;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu.av-open-submenu {
    display: block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu li {
    display: block;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 0;
}

.responsive #top .av-subnav-menu > li:first-child {
    margin-top: -1px;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a {
    border-left: none;
    padding: 15px 15%;
    text-align: left;
}

.responsive #top .av-submenu-container {
    top: 50px !important;
    position: relative !important;
    height: auto;
}

.responsive #top #wrap_all .av-menu-mobile-active.container {
    width: 100%;
    max-width: 100%;
}

.responsive #top .av-menu-mobile-active {
    text-align: center;
}
}

    Best regards,
    Ismael

    June 3, 2016 at 7:23 am #642424
    mike.rav

    Wow a lot of styles needed. Consider including this in next Enfold update.

    Excellent thank you.

    What about the social icons now?

    Like i said, on Desktop i have the option of displaying the social icons “in main header are”. On mobile view though they are not available. How can i place them in the header somewhere?

    Thanks

    • This reply was modified 8 years, 6 months ago by mike.rav. Reason: update
    June 4, 2016 at 9:22 am #642881
    Vinay

    Hi!

    The login credentials do not work for me. Please add this code to functions.php http://pastebin.com/edit/AkEACX3Q If you already have added this do not add 2 times it will crash the site then you have to access the functions.php via FTP and remove this code and reupload the file to get the site back up.

    Then add the CSS provided in the above post This should display the social icons in mobile menu :)

    If you have any issue please get back to us with working login credentials so we can take a closer look.

    Cheers!
    Vinay

    June 5, 2016 at 8:41 am #643097
    mike.rav

    Hello,

    Thanks for the response.

    The pastebin url is not working. EDIT: removed the ‘edit’ part and shows fine. Those are the same codes you provided earlier. and like i said they dont work

    Re-adding credentials to check.

    • This reply was modified 8 years, 6 months ago by mike.rav.
    June 7, 2016 at 4:54 am #643764
    Vinay

    Hey!

    The menu is modified so it is not possibly to add the social icons with quick custom code it will take a lot of time to modify this. instead we have added the social icons outside the mobile menu in mobile please review the site now :)

    The below css was added in Styles.css

    
/* Mobile Social Icons*/

#header_main .social_bookmarks{
display:block!important;
} 

@media only screen and (max-width:767px) {
#header_main .social_bookmarks{
    margin-top: 44px!important;
    margin-right: -66px!important;
} }

    Regards,
    Vinay

    June 7, 2016 at 7:15 am #643829
    mike.rav

    Wow, awesome , exactly what i wanted.

    Top support once again!

    Cheers

    June 8, 2016 at 4:41 am #644497
    Ismael

    Hi,

    Great! Glad we could help. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘FW Sub Menu and Social Icons on mobile’ is closed to new replies.