Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 25, 2018 at 1:19 pm #1014172
    Arthapignet

    Hi,

    I currently have 3 issues:

    1. I’m trying to put the search icon to the left side of burger menu for mobile header. Right now, the search icon is above the burger menu. For desktop, it’s already fine.

    2. Can you help me put the logo and social icons within the burger menu? At the top, before all of the menu items. For now, I’ve set the logo to display: none; because it’s overlapping with the cart icon.

    3. Is there a way to switch cart “on mouseover” event to “on click” when being viewed on mobile device? So when clicked, it displayed a preview of the cart, instead of going to the cart page.

    Any help is appreciated.
    Thanks.

    September 25, 2018 at 6:32 pm #1014364
    Victoria

    Hey Arthapignet,

    Looks like the search icon is in the correct position now.

    Here are some threads to consider:
    https://kriesi.at/support/topic/social-media-in-the-menu-overlay/

    3. It is, but it is out of the scope of our support, you might want to hire a freelancer to do it for you.

    Best regards,
    Victoria

    September 25, 2018 at 6:59 pm #1014393
    Arthapignet

    Hi,

    Yes, regarding point 1, I’m able to find a solution for it.

    Regarding point 2, I’ve added 2 custom links for the social bookmarks to the burger menu, can you tell me how to display the social icons side by side (like in the desktop version), and what’s the “Navigation Label” value for Facebook and Instagram icon? I think they’re entypo font?

    Regarding point 3, switching onmouseover to onclick on mobile, can you at least point me in the right direction? I’ve done some searching, but can’t find a decent solution for this.

    Thanks.

    September 26, 2018 at 7:35 pm #1014950
    Victoria

    Hi Arthapignet,

    Here is the code you can put 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) {
    .html_av-overlay-side #top #wrap_all .av-burger-overlay li.burger-social a {
        padding: 10px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 26, 2018 at 7:59 pm #1014971
    Arthapignet

    Hi,

    Thanks for the help.

    I finally use this solution to disable cart mouseover / hover event on mobile device. Might be useful to others who wants to preview their mini carts on mobile. Modify the end of “woocommerce-mod.js” file (around line 310) which is located in “config-woocommerce” folder.

    //small function that improves shoping cart hover behaviour in the menu
function cart_dropdown_improvement()
{
	var dropdown = jQuery('.cart_dropdown'), subelement = dropdown.find('.dropdown_widget').css({display:'none', opacity:0});
	var windowWidth = window.innerWidth;
	
	if (windowWidth > 767){
  	dropdown.hover(
  	function(){ subelement.css({display:'block'}).stop().animate({opacity:1}); },
  	function(){ subelement.stop().animate({opacity:0}, function(){ subelement.css({display:'none'}); }); }
  	);
  } else {
  	var clicked = 0;
  	dropdown.click(
  	function(){
  		if(clicked === 0){
  			jQuery('.cart_dropdown_link').attr('href', 'javascript:void(0)');
  			subelement.css({display:'block'}).stop().animate({opacity:1});
  			clicked = 1;
  		} else if(clicked === 1){
  			jQuery('.cart_dropdown_link').attr('href', 'javascript:void(0)');
  			subelement.stop().animate({opacity:0}, function(){ subelement.css({display:'none'}); });
  			clicked = 0;
  		}
  	});
  }
}

    Might be a good idea to integrate this to Enfold too? As many of us expect our customers to open our site from mobile device.

    Thanks.

    September 27, 2018 at 3:01 pm #1015314
    Victoria

    Hi Arthapignet,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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