-
AuthorPosts
-
March 31, 2017 at 4:06 pm #770037
Hi, the current mobile menu is: logo+ cart icon+menu icon
can I add the search icon?
March 31, 2017 at 4:10 pm #770039or maybe just move the search icon sticky to the cart icon ( as the same group), so it will display all the time in mobile?
April 1, 2017 at 5:30 pm #770375Hi YongyanLi,
Here is the code you can put this in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { #menu-item-shop { min-width: 130px; margin-right: 20px; } }
and this to functions.php
add_action('wp_footer', 'ava_new_custom_script'); function ava_new_custom_script(){ ?> <script type="text/javascript"> (function($) { function a() { if ($.avia_utilities.isMobile) { $('#menu-item-search').appendTo($('#menu-item-shop')); } } $(window).load(function() { a(); }); })(jQuery); </script> <?php }
If you need further assistance please let us know.
Best regards,
VictoriaApril 4, 2017 at 4:32 am #771475Hi, Victoria
It is working
Thanks very much.
But there is still some adjustment
Can you help?
see the mobile view( iphone 6)
https://drive.google.com/file/d/0B6L9QZ3Td5YjaDlhYVQ5RUo1aHM/view?usp=sharing
https://drive.google.com/file/d/0B6L9QZ3Td5YjREwtS0dCeERubFk/view?usp=sharingI guess the logo can be smaller and the search icon can move more left.(now is too close to the menu ,so it is hidden by it )
April 4, 2017 at 4:42 am #771478I tried to adjust the margin right, but it didn’t work
April 6, 2017 at 10:37 am #773070Hi YongyanLi,
Here is the code you can put this in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { #menu-item-shop .cart_dropdown_link { padding: 0 24px; } #menu-item-shop #menu-item-search { width: 0px; } #menu-item-shop #menu-item-search .avia-search-tooltip.avia-tt { left: -16px !important; } #menu-item-shop { min-width: 110px; } }
This will move the search from below the menu, but in general it’s not a good solution. Your logo is text, there is no need to have it as an image. It would be more flexible, better for SEO if you had it as text.
If you need further assistance please let us know.
Best regards,
VictoriaApril 8, 2017 at 6:53 am #774300Hi, Vitoria
Thanks. indeed, that’s not a good solution.
However, I will try to keep it as a image, as I search the forum, many people got problem if they use TEXT LOGO only.anyway, I make it smaller in the subtext. someday in the future, I will add text instead.
back to the priority, the CSS you offer didn’t help too much.
when you click the Cart Icon, it will come to the cart page directly without showing message: there is no production in your cart
when you click the search icon, it shows” there is no production in your cart” and then you click again, the search table comes out finally…( they display in turn)this is not just a simple gap space problem
April 12, 2017 at 2:10 pm #776652Hi,
Sorry for the late reply, we checked your site but did not find the search icon in the mobile version. From the previous discussion, it appears the search icon was active in the mobile version. Let us know if this was intended or if you still like to add the search icon try the below css in the quick CSS section.
@media only screen and (max-width: 990px) { .responsive.html_mobile_menu_tablet .main_menu .avia-menu { display: block; } .av-main-nav li { display: none; } li#menu-item-search { display: block; right: 70px; }}
If you still have any issue please upload a screenshot/mockup of what you are trying to achieve to imgur.com and share the link here so we can help you better :)
Best regards,
VinayApril 12, 2017 at 3:06 pm #776681actually i did make the mobile search activated.
I believe the NO SHOW is because the mistakes of cache ( the chrome tools telling errors and some enfold CSS,JS was blocked because it cached as http instead https.. )
I don’t know if this your problem or wp-rocket
I am still talking with the WP rocket
to solved this problem I tried to update enfold 4.05 and now more problems occur
April 12, 2017 at 10:00 pm #776932Hey!
We work closely with some popular plugin authors to release an update if there are any compatibility issues. You will soon notice an update :)
For testing purpose try to deactivate the incompatible plugin and install an alternate caching plugin to see if that helps you fix the issue.Cheers!
Vinay- This reply was modified 7 years, 8 months ago by Vinay.
April 14, 2017 at 7:33 pm #778015Enfold theme (Current as of 4-14-17), with WooCommerce (Current as of 4-14-17).
Search Icon issue in mobile version.
I have to double tap the search icon graphic to get the search field to pop up. The first tap pops up the Shopping Cart info, as empty or a given # of items in the cart. The second tap gives me the search field on top of the cart info. Tapping the cart works as it should.
Here is what I have done.
Any suggestions?
THE CODE USED:
In “Enfold”, functions.php:
add_action(‘wp_footer’, ‘ava_new_custom_script’);
function ava_new_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
function a() {
if ($.avia_utilities.isMobile) {
$(‘#menu-item-search’).appendTo($(‘#menu-item-shop’));
}
}$(window).load(function() {
a();
});
})(jQuery);
</script>
<?php
}In “Enfold Child” quick CSS:
@media only screen and (max-width: 767px) {
#menu-item-shop .cart_dropdown_link {
padding: 0 24px;
}#menu-item-shop #menu-item-search {
width: 0px;
}#menu-item-shop #menu-item-search .avia-search-tooltip.avia-tt {
left: -16px !important;
}
#menu-item-shop {
min-width: 110px;
}April 16, 2017 at 4:40 pm #778446Hi,
As I understand you want to show the search icon in tablets and mobile correct?
Please remove all the code related to this modification so to avoid any conflict.I have tried this code on my installation and it works 100% in case you do not see any changes after adding this code please make sure the cache is purged in caching plugin and deactivate the caching plugin.
@media only screen and (max-width: 990px) { .responsive.html_mobile_menu_tablet .main_menu .avia-menu { display: block; position:absolute; width:100%; } #menu-item-burger{ display:none!important; } .av-main-nav li { display: none; } li#menu-item-search { display: block; transform:translate(0,-100%); left:63%; }}
Best regards,
Vinay- This reply was modified 7 years, 8 months ago by Vinay.
April 20, 2017 at 10:29 pm #780847Vinjay, Yes I need to have search options available for Mobile platforms. I have removed the other code as you suggested and added your code. However this did not work for me. I emptied my cache on my iPhone, and no search icon appears. I am not sure if you mean “please make sure the cache is purged in caching plugin and deactivate the caching plugin.” I do not have a Cache plug in installed on my site.
Thanks,
spMongiatApril 21, 2017 at 8:25 pm #781378Hi,
I have tested this code on my installation and it works fine. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayApril 22, 2017 at 3:46 am #781510Hi, My caches problem have been fixed, somehow it works ok now
I hope it won’t come back againso let us continue the issues that we talked about before
please check my mobile view again
when I click at the first time the search icon, it shows no products in your cart, and click the second time, it display the search table finally.
( it works just like when we click the cart icon)how to solve this?
April 27, 2017 at 6:45 am #783813Hi,
I’m sorry but I’m not sure how the cart and search icon relates? Could you please provide a screenshot of the “search table” issue?
Best regards,
IsmaelApril 27, 2017 at 9:13 am #783885Hi, Ismael
https://drive.google.com/file/d/0B6L9QZ3Td5Yjc3NRQmdlcXhDY0U/view?usp=sharing
please check this link, then you will know what I mean
April 28, 2017 at 9:38 am #784369Hi!
It works like that because the cart icon container covers the search icon. Please add the search icon back then add this css code.
@media only screen and (max-width: 767px) { .responsive #top #menu-item-shop.cart_dropdown { width: 30px; min-width: 30px; right: 30%; } }
Regards,
IsmaelApril 29, 2017 at 10:16 am #784917No, the above code is not working as well
so I use the old CSS again from Vivtoria (amend a littlle bit to keep more space for this 2 icon)
CSS:@media only screen and (max-width: 767px) {
#menu-item-shop .cart_dropdown_link {
padding: 0 10px;
}#menu-item-shop #menu-item-search {
padding: 0 20px;
}#menu-item-shop #menu-item-search .avia-search-tooltip.avia-tt {
left: -16px !important;
}
#menu-item-shop {
min-width: 110px;
}
}and functions.php
add_action(‘wp_footer’, ‘ava_new_custom_script’);
function ava_new_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
function a() {
if ($.avia_utilities.isMobile) {
$(‘#menu-item-search’).appendTo($(‘#menu-item-shop’));
}
}$(window).load(function() {
a();
});
})(jQuery);
</script>
<?php
}I believe THERE IS SOMETHING WRONG WITH THE CSS, which make the search icon being in the container of cart icon
May 1, 2017 at 10:51 pm #786012Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayMay 2, 2017 at 11:42 pm #786793Hi guys,
Having the same problem too with my website. I’m trying to get the search icon appear on desktop/tablet/mobile menu navigation.
May 3, 2017 at 8:15 pm #787358Hi,
Have you tried the code provided and it did not worked out?
Or what you did?Also please note if you need quicker help, best is to open your support ticket
Best regards,
BasilisMay 3, 2017 at 9:57 pm #787435Who are you addressing? I’ve replied and send my login credentials and do not get any reply addressed to me “spMongiat”.
I’ve replied and get random replies and no answers addressing my query.
Thanks,
spMongiatMay 4, 2017 at 11:03 am #787695Hi spMongiat and orangeamps,
Please start a separate thread, it got very confusing at this point and you did not get your issue resolved.
If you need further assistance please let us know.
Best regards,
VictoriaMay 4, 2017 at 12:21 pm #787743Will do. Thanks Victoria!
May 9, 2017 at 7:29 am #790030Great then.
I got confused too……….
Don’t know which solution is for me
so now can any one tell me how to solve my problem?
to make it clear, I would like to start over again:my problem is https://drive.google.com/file/d/0B6L9QZ3Td5Yjc3NRQmdlcXhDY0U/view?usp=sharing
the code as below:CSS:
@media only screen and (max-width: 767px) {
#menu-item-shop .cart_dropdown_link {
padding: 0 10px;
}#menu-item-shop #menu-item-search {
padding: 0 20px;
}#menu-item-shop #menu-item-search .avia-search-tooltip.avia-tt {
left: -16px !important;
}
#menu-item-shop {
min-width: 110px;
}
}and functions.php
add_action(‘wp_footer’, ‘ava_new_custom_script’);
function ava_new_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
function a() {
if ($.avia_utilities.isMobile) {
$(‘#menu-item-search’).appendTo($(‘#menu-item-shop’));
}
}$(window).load(function() {
a();
});
})(jQuery);
</script>
<?php
}May 9, 2017 at 6:33 pm #790501Hi YongyanLi,
I don’t see the search icon on mobile version. Did you remove the script?
Best regards,
VictoriaMay 20, 2017 at 1:10 pm #796976NO….
I don’t know what have happen…I keep have mixed content issues after caching
so the icon is always get blocked and disappeared
still try to find out if it is Enfold problem or WP rocket or the webserver
May 24, 2017 at 2:29 pm #798907Hi,
@YongyanLi: That sounds like another issue. Please open a new thread then post the login details.For the original inquiry, please remove the previous modifications then add this code in the functions.php file:
function ava_custom_script_mod(){ ?> <script> (function($){ function a() { var search = $('#menu-item-search').clone(); search.addClass('mobile-search-icon'); search.insertBefore('.cart_dropdown '); } a(); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod');
In the Quick CSS field, add the following code.
#top .mobile-search-icon { width: 50px; position: absolute; top: 33px; right: 150px; list-style: none; text-align: center; } @media only screen and (min-width: 768px) { .mobile-search-icon { display: none; } }
Best regards,
IsmaelMay 25, 2017 at 2:17 pm #799572Hi, it is working
now the search icon works normally
just the position is weird and it looks terrible
-
AuthorPosts
- You must be logged in to reply to this topic.