Tagged: ,

Viewing 30 posts - 1 through 30 (of 36 total)
  • Author
    Posts
  • #770037

    Hi, the current mobile menu is: logo+ cart icon+menu icon

    can I add the search icon?

    #770039

    or maybe just move the search icon sticky to the cart icon ( as the same group), so it will display all the time in mobile?

    #770375

    Hi 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,
    Victoria

    #771475

    Hi, 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=sharing

    I 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 )

    #771478

    I tried to adjust the margin right, but it didn’t work

    #773070

    Hi 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,
    Victoria

    #774300

    Hi, 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

    #776652

    Hi,

    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,
    Vinay

    #776681

    actually 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

    #776932

    Hey!

    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, 6 months ago by Vinay.
    #778015

    Enfold 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;
    }

    #778446

    Hi,

    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, 6 months ago by Vinay.
    #780847

    Vinjay, 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,
    spMongiat

    #781378

    Hi,

    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,
    Vinay

    #781510

    Hi, My caches problem have been fixed, somehow it works ok now
    I hope it won’t come back again

    so 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?

    #783813

    Hi,

    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,
    Ismael

    #783885

    Hi, Ismael

    https://drive.google.com/file/d/0B6L9QZ3Td5Yjc3NRQmdlcXhDY0U/view?usp=sharing

    please check this link, then you will know what I mean

    #784369

    Hi!

    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,
    Ismael

    #784917

    No, 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

    #786012

    Hi,

    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,
    Vinay

    #786793

    Hi guys,

    Having the same problem too with my website. I’m trying to get the search icon appear on desktop/tablet/mobile menu navigation.

    #787358

    Hi,

    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,
    Basilis

    #787435

    Who 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,
    spMongiat

    #787695

    Hi 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,
    Victoria

    #787743

    Will do. Thanks Victoria!

    #790030

    Great 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
    }

    #790501

    Hi YongyanLi,

    I don’t see the search icon on mobile version. Did you remove the script?

    Best regards,
    Victoria

    #796976

    NO….
    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

    #798907

    Hi,


    @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,
    Ismael

    #799572

    Hi, it is working

    now the search icon works normally

    just the position is weird and it looks terrible

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