Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #660156

    Hey there Kriesi!
    We are using the sidebar widgets for our left hand navigation menu. I have been trying to see how to have this left hand navigation ‘sidebar pages’ widget minimize the same way the top menu shrinks when in mobile view.
    Please see link below to a few sample pages containing this ‘sidebar pages’ widget and how it looks when minimized. We wanted to avoid having the entire menu as the first thing you view when you’re on a mobile device. Is there a CSS that can be added that will have this ‘sidebar pages’ widget minimize after a certain screensize?

    Thank you!!!!!!!!!

    #661121

    Hey tlchase!

    Thank you for using Enfold.

    Looks like the widget area is being used in place of the sidebar. The default sidebar should go to the bottom of the page on mobile view. We can use jQuery to reverse the order of the column on mobile view. Example: https://kriesi.at/support/topic/remove-border-from-partner-logo-list/#post-586602

    Please turn on a custom css class. Edit the columns then add a unique class attribute to them.

    Best regards,
    Ismael

    #662701

    Thank you Ismael, I was reviewing the post example and response but that would mean that I would have to update each column where the sidebar pages widget resides, correct? We have 260+ pages on our site, is there any other way to have all sidebar pages widget appear at the bottom in mobile view? Or perhaps more ideally, if this sidebar pages widget could be minimized since the widget is referencing an actual enfold menu?

    Any other options or ideas would be greatly appreciated. Thank you!

    #664122

    Hi,

    Do you have the same menu widget on every page? This snippet might work:

    // custom script
    add_action('wp_footer', 'add_custom_script');
    function add_custom_script(){
    ?>
    <script>
    (function($){
    	function a() {
    		var isMobile = '';
    
    		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
    		{
    			isMobile =  true;
    		}
    		else
    		{
    			isMobile =  false;
    		}
    
    		if( isMobile ) {
    			var sidebar = $('.menu-irb-container').parents('.flex_column');
    			sidebar.next().insertBefore(sidebar);
    		}
    	}
    
    	a();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Best regards,
    Ismael

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