Skip to Main Content

Libguides reusable content

for reusable content

Changing your templates to pin the left nav

To take advantage of Bootstrap's Affix functionality to make your sidenav menu stay visible as users scroll down the page, you'll need to tweak your sidenav guide template (only admins can do this):

Under Admin > Look & Feel > Page Layout > Guide select Customize Guide Templates and choose the default sidenav template (or your modified template if you've already created one. Just be sure to save a new template so you don't accidentally ruin your existing one!).

Step 1

At the top of the template, add the following code: 

<head><script type="text/javascript" src="//s3.amazonaws.com/libapps/sites/77/include/affix_sidebar.js"></script></head>

This loads the script to initiate the affix functionality when your page loads. You will need to create your own version of this file (replacing the URL in green) to adjust the offset values according to the size of your header and footer. You can upload files by going to Admin > Look & Feel > Custom JS/CSS and then clicking on Customization Files.

Step 2

Replace the existing <body> tag in the template with this:

<body class="s-lg-guide-body" data-spy="scroll" data-target="#affix-nav">

This identifies for the script the parent tag of the menu element we want highlighted as a user scrolls down the page.

Step 3

In the body of the guide template, you need to add data-spy="affix" id="affix-ul" as an attribute of the <ul> tag containing the page-level menu (identified in the template by the {{guide_nav}} keyword). Then add the #affix-nav ID to its parent <div>. This is highlighted in my template in green below.

 

 <!-- END: Guide Header -->
        <div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>
        <div id="s-lg-tabs-container" class="container s-lib-side-borders pad-top-med">
            <div id="s-lg-guide-tabs">
                <div class="row">
                    <div id="affix-nav" class="col-md-3 s-lg-tabs-side pad-bottom-med">
                        <ul class="nav nav-pills nav-stacked" data-spy="affix" id="affix-ul">{{guide_nav }}</ul>
                        {{side_nav_boxes}}
                    </div>
                    <div class="col-md-9">
                        <div class="s-lg-tab-content">
                            <div id="s-lg-guide-main" class="tab-pane active">
                                {{content}}
                            </div>
                        </div>
                        {{page_prev_next_links}}
                    </div>
                </div>
            </div>
        </div>
        <!-- BEGIN: Page Footer -->

Step 4

The final piece is to add a stylesheet to adjust the color outlines and backgrounds for the boxes as a user scrolls to match your site's color palette. You will probably also need to modify the stylesheet to set the appropriate width for your menu. My stylesheet is here: http://s3.amazonaws.com/libapps/sites/77/include/affix_sidebar_template.css. Once you've customized the stylesheet to meet your needs, upload it to as outlined in Step 1 and then add a link to it in the Admin > Look & Feel > Page Layout > Custom JS/CSS Code section.