-
AuthorPosts
-
May 26, 2016 at 1:10 pm #638680
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 #639084Hi george,
Could you provide us with a link to the site in question so that we can take a closer look please?
Thanks,
RikardMay 27, 2016 at 7:30 am #639133Hey thanks for the response.
Added in private content.
May 28, 2016 at 3:32 am #639626Hi,
Thank you for the info. Have you tried setting the “Mobile Menu Display” to display a button on tablet and phone screens?
Best regards,
IsmaelMay 30, 2016 at 7:14 am #640150Yes, i said that
May 30, 2016 at 2:15 pm #640368Hi,
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,
AndyMay 30, 2016 at 2:41 pm #640404Hey,
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 #640641Hi!
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!
VinayMay 31, 2016 at 8:56 am #640749Hello,
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 #641213Hi,
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,
IsmaelJune 1, 2016 at 7:34 am #641279Hello,
I have added the info to private content.
June 2, 2016 at 7:36 am #641879If 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 #642344Hi,
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,
IsmaelJune 3, 2016 at 7:23 am #642424Wow 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, 5 months ago by mike.rav. Reason: update
June 4, 2016 at 9:22 am #642881Hi!
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!
VinayJune 5, 2016 at 8:41 am #643097Hello,
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, 5 months ago by mike.rav.
June 7, 2016 at 4:54 am #643764Hey!
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,
VinayJune 7, 2016 at 7:15 am #643829Wow, awesome , exactly what i wanted.
Top support once again!
Cheers
June 8, 2016 at 4:41 am #644497 -
AuthorPosts
- The topic ‘FW Sub Menu and Social Icons on mobile’ is closed to new replies.