Tagged: sidebar
-
AuthorPosts
-
September 26, 2016 at 10:44 am #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.
-rolf
September 26, 2016 at 10:46 am #691527this 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
September 29, 2016 at 5:29 am #692949Hi,
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,
IsmaelDecember 15, 2016 at 3:58 pm #724880Hi 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…
December 20, 2016 at 7:22 am #726432Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.