Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #691526

    Hi, I would like to create a page like this with Enfold > http://getbootstrap.com/getting-started/ with a floating sidebar navigation.

    I know how to do this with the navigation sitting on top of the content using the FullWidthSubmenu component, but is it possible to have a page with the navigation on the left or right sidebar?

    Playing around with the sidebar settings on page level did not bring the results I expected.

    http://take.ms/nH5BN

    -rolf

    #691527

    this would be another example of what i would like to accomplish

    https://get.slack.help/hc/en-us/articles/218080037-Getting-started-for-new-users

    #692949

    Hi,

    Thank you for using Enfold.

    Edit one of the pages, set the layout to “No Sidebar then add a 3/4 and 1/4 column. Add a text block in the 1/4 column.
    and apply a custom css class attribute “fixed-column” to it. Add this code in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    ?>
    <script type="text/javascript">
    (function($) {
    	function c() {
    		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) return;
    
    		var $sidebar   = $(".fixed-column"),
    			$window    = $(window),
    			offset     = $sidebar.offset();
    
    		$window.scroll(function() {
    			if ($window.scrollTop() > offset.top) {
    				$sidebar.addClass('affix');
    			} else {
    				$sidebar.removeClass('affix');
    			}
    		});
    	}
    
    	c();
    })(jQuery);
    </script>
    <?php
    }

    And this css code in the Quick CSS field:

    @media (min-width: 989px) {
      #top .affix > section {
          position: fixed !important;
          top: 150px;
      }
    }

    This code should work on its own but might require a few adjustments based on the current layout of the site.

    Best regards,
    Ismael

    #724880

    Hi Ismael,

    i am about to build a side where a floating navigation will be best practice. Taking the code above plus the additional quick css entry, my page is completely white and i can bring it back to life by restoring the old functions.php. Ist there any bug in the code?

    (i copied the code in the wordpress editor directly underneath the introduction text…)

    Thanks a lot…

    #726432

    Hi,

    Replacing the code in functions.php with a different version functions.php is not recommended unless you are using a child theme. Ideally in this situation we suggest to just add the modification provided by our mods. However if you notice any issues in future or if you haven’t been using a child theme please update the theme and download the child theme from http://kriesi.at/documentation/enfold/using-a-child-theme/

    Thank you for using enfold :)

    Best regards,
    Vinay

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