Topic: scrollspy sticky not working

mpardike pro asked 6 years ago


I am trying to implement the scrollspy into my page. I have setup the scrollspy as a right sidebar and it shows up. I can click on any of the list items and it takes me to the correct location. The issue is that the scrollspy menu does not follow when I scroll and it doesn't follow when I click on the list item. It stays at the top of the page. I do have class="sticky" defined. What am I missing?

Piotr Glejzer staff commented 6 years ago

Hi mpardike, can you show me your code with scrollspy? I will try figure out what is wrong with this code and I will try to help you. Best, Piotr

Piotr Glejzer staff commented 6 years ago

Hi mpardike, can you show me your code with scrollspy? I will try figure out what is wrong with this code and I will try to help you. Best, Piotr

mpardike pro commented 6 years ago

Thanks! Here is my code: <pre>Start your code here</pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Spectra - Temp Article</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Lighthouse custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body class="lh-text" data-spy="scroll" data-target="#scrollspy" data-offset="15"> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top scrolling-navbar"> <a class="navbar-brand" href="SpectraHelpCenter.html"> <img src="HCImages/SpectraLogo_Darkbg.png" height="30" alt="Lighthouse Spectra"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerSpectra" aria-controls="navbarTogglerSpectra" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerSpectra"> <ul class="navbar-nav mr-auto mt-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Article section - Article Title</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="GetStartedLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Getting Started</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Spectra Introduction</a> <a class="dropdown-item" href="#">Spectra Support</a> <a class="dropdown-item" href="#">Spectra Roles</a> </div> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="MatterLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Spectra Matters</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Matter Creation &amp; Settings</a> <a class="dropdown-item" href="#">Adding and Assigning Team Members</a> </div> </li> > <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="DataProcessLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Data Ingestion &amp; Processing</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Data Ingestion &amp; Custodians</a> <a class="dropdown-item" href="#">Data Processing &amp; Reports</a> </div> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="ImagingProdLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Imaging, Productions &amp; Exports</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Imaging Settings</a> <a class="dropdown-item" href="#">Productions &amp; Exports</a> </div> </li> </ul> </div> </nav> </header> <main class="mt-5"> <!--Main layout--> <div class="container"> <div class="row"> <!--Main column--> <div class="col-lg-10 col-md-12"> <!-- Article title goes here --> <h1 class="pt-5 h1-responsive">Article title</h1> <br> <!--Overview--> <section id="Overview"> <div class="post-wrapper"> <h2 small>Overview</h2> <hr> <!--Enter text that describes the artlicle at a high level--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p> <br> </div> </section> <!--/.Overview --> <!--How to section 1--> <section id="How To Guide 1"> <div class="post-wrapper"> <h2 small>How do I ...?</h2> <hr> <!--Enter text here that describes the How to guide--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p> <br> <!-- Enter the step text and description --> <h3>First step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Half size screenshot image --> <div class="row"> <div class="col-6"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Enter the step text and description --> <h3>Second step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Full size screenshot image --> <div class="row"> <div class="col-10"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Enter the step text and description --> <h3>Third step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Enter steps for this type of format here --> <dl class="row"> <dt class="col-sm-3">Step or option</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dt class="col-sm-3">Step or option</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dd class="col-sm-9 offset-sm-3">This line represents a hard return for this step.</dd> <dt class="col-sm-3">Step or option without truncated text</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dt class="col-sm-3 text-truncate">Step or option with truncated text</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action. This also demonstrates a wrapped sentence and how it differs from a hard return line as demonstrated in the second step above.</dd> </dl> <!-- Half size screenshot image --> <div class="row"> <div class="col-6"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Enter the step text and description --> <h3>Fourth step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Enter ordered steps here --> <ol> <li>Step or option here</li> <li>Step or option here</li> <li>Step or option here</li> <li>Step or option here</li> </ol> <!-- Full size screenshot image --> <div class="row"> <div class="col-10"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> </div> </section> <!--/.How to section 1--> <br> <br> <!--How to section 2--> <section id="How To Guide 2"> <div class="post-wrapper"> <!-- Enter title --> <h2 small class="text-muted">How do I ...?</h2> <hr> <!--Enter text here that describes the How to guide--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus, impedit.</p> <br> <!-- Change the step text and description --> <h3>First step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Half size screenshot image --> <div class="row"> <div class="col-6"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Change the step text and description --> <h3>Second step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Full size screenshot image --> <div class="row"> <div class="col-10"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Change the step text and description --> <h3>Third step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Enter steps for this type of format here --> <dl class="row"> <dt class="col-sm-3">Step or option</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dt class="col-sm-3">Step or option</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dd class="col-sm-9 offset-sm-3">This line represents a hard return for this step.</dd> <dt class="col-sm-3">Step or option without truncated text</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action.</dd> <dt class="col-sm-3 text-truncate">Step or option with truncated text</dt> <dd class="col-sm-9">Provide description here <strong>emphasizing</strong> the action. This also demonstrates a wrapped sentence and how it differs from a hard return line as demonstrated in the second step above.</dd> </dl> <!-- Half size screenshot image --> <div class="row"> <div class="col-6"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> <br> <br> <!-- Change the step text and description --> <h3>Fourth step or option</h3> <p>Provide description of step here with or without relative image below being sure to <strong>emphasize</strong> the actions.</p> <!-- Enter ordered steps here --> <ol> <li>Step or option here</li> <li>Step or option here</li> <li>Step or option here</li> <li>Step or option here</li> </ol> <!-- Full size screenshot image --> <div class="row"> <div class="col-10"> <div class="view overlay z-depth-1-half"> <img src="HCImages/example.jpg" class="img-fluid " alt=""> </div> </div> </div> </div> </section> <!--/.How to section 2--> <br> <br> <!--Roles and Permissions--> <section id="Roles and Permissions"> <div class="post-wrapper table-responsive"> <h2 small>Roles &amp; Permissions</h2> <hr> <!-- Enter a brief description of roles and permissions. Be sure the html link to the article is correct. --> <p>Breif discription with link to complete <a href="RolesPermissions.html">Roles and Permissions</a> article.</p> <br> <!-- Use this table for roles and permissions and provide a breif description. --> <h3>Feature permission title</h3> <p>Provide description of feature roles and permissions here.</p> <table class="table table-sm table-striped"> <thead> <tr> <th>Action</th> <th>Client Admin</th> <th>Discovery Manager*</th> <th>Reviewer*</th> </tr> </thead> <tbody> <tr> <td scope="row">Action description</td> <td><i class="fa fa-check" aria-hidden="true"></i></td> <td><i class="fa fa-check" aria-hidden="true"></i></td> <td><i class="fa fa-check" aria-hidden="true"></i></td> </tr> <tr> <td scope="row">Action description</td> <td><i class="fa fa-check" aria-hidden="true"></i></td> <td><i class="fa fa-check" aria-hidden="true"></i></td> <td><i class="fa fa-check" aria-hidden="true"></i></td> </tr> <tr> <td scope="row">Action description</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> <p><em>*Note: These roles only have these permissions within Matters they have been granted access to.</em></p> </div> </section> <!--/.Roles and Permissions--> <br> <br> <!--Training and Documents --> <section id="Training and Documents"> <div class="post-wrapper table-responsive"> <h2 small>Training &amp; Documents</h2> <hr> <!-- Enter a brief description about training and documents found here. Provide links to additional training. --> <p>Breif discription about training options and documents that can be downloaded.</p> <br> <!-- Training videos --> <h3>Training videos and user guides</h3> <div class="row mt-5 ml-2 mr-2"> <!--Trainin video link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card vidoe image--> <div class="view overlay"> <img src="HCImages/SpectraVidLogo.png" class="card-img-top" alt=""> </div> <!--Card video content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Video title</h4> <!--Text--> <p class="card-text">High level video explaination goes here.</p> <a href="VideoTemp.html" class="btn btn-lh-primary"><i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a> </div> </div> <!--/.Card--> </div> <!--/Training video link cards--> <!--Trainin video link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card vidoe image--> <div class="view overlay"> <img src="HCImages/RelativityLogo.jpg" class="card-img-top" alt=""> </div> <!--Card video content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Video title</h4> <!--Text--> <p class="card-text">High level video explaination goes here.</p> <a href="VideoTemp.html" class="btn btn-lh-primary"><i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a> </div> </div> <!--/.Card--> </div> <!--/Training video link cards--> <!--Trainin video link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card vidoe image--> <div class="view overlay"> <img src="HCImages/BrainspaceLogo.png" class="card-img-top" alt=""> </div> <!--Card video content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Video title</h4> <!--Text--> <p class="card-text">High level video explaination goes here.</p> <a href="TVideoTemp.html" class="btn btn-lh-primary"><i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a> </div> </div> <!--/.Card--> </div> <!--/Training video link cards--> </div> <!--/Training videos--> <br> <!-- Documents --> <h3>Documents</h3> <div class="row mt-5 ml-2 mr-2"> <!--Document link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card document content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Document title</h4> <!--Text--> <p class="card-text">High level document explaination goes here.</p> <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary"><i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a> </div> </div> <!--/.Card--> </div> <!--/Document link cards--> <!--Document link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card document content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Document title</h4> <!--Text--> <p class="card-text">High level document explaination goes here.</p> <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary"><i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a> </div> </div> <!--/.Card--> </div> <!--/Document link cards--> <!--Document link cards--> <div class="col-lg-4 col-md-12 mb-4"> <!--Card--> <div class="card"> <!--Card document content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Document title</h4> <!--Text--> <p class="card-text">High level document explaination goes here.</p> <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary"><i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a> </div> </div> <!--/.Card--> </div> <!--/Document link cards--> </div> <!--Grid row--> </div> </section> <!--/.Training and Documentation--> <br> <br> </div> <!-- Right Sidebar --> <div class=" pt-5 col-md-2"> <!-- Scrollspy--> <div id="scrollspy-menu" class="sticky"> <ul class="nav nav-pills default-pills smooth-scroll" data-allow-hashes="true"> <li class="nav-item"> <a class="nav-link active" href="#Overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="#How To Guide 1">How To Guide 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#How To Guide 2">How To Guide 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#Roles and Permissions">Roles &amp; Permissions</a> </li> <li class="nav-item"> <a class="nav-link" href="#Training and Documents">Training &amp; Documents</a> </li> </ul> </div> </div> <div class="col-md-10"> <!--/. Right Sidebar --> </div> </div> </div> </main> <!-- Footer --> <footer class="page-footer font-small bg-primary"> <div class="container"> <div class="row"> <div class="mt-2 col-md-8"> <p>© 2018 <a target="_blank" href="https://www.lighthouseglobal.com">Lighthouse</a>. All Rights Reserved.</p> </div> <div class="mt-2 col-md-4"> <div class="social-section text-center text-md-right"> <p><a class="mr-xl-4" target="_blank" href="https://www.lighthouseglobal.com/privacy-policy">Privacy Policy</a> <a class="mr-xl-4" target="_blank" href="https://www.lighthouseglobal.com/terms-of-use">Terms of Use</a></p> </div> </div> </div> </div> </footer> <!-- Footer --> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>  

mpardike pro answered 6 years ago


Nope, I figured it out. Looks like I needed to add the class="sticky" back into the code. Works perfectly now. Thanks for your patience and help!

Piotr Glejzer staff answered 6 years ago


Hi,
I fixed your code.
I changed :
- id at body
- id at scrollspy
- added style to scrollspy in html
- data target

Here is code from 'body' to footer. You need just copy and paste ;)


<body class="lh-text" data-spy="scroll" data-target="#scrollspy" data-offset="15">

 <header>

 <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top scrolling-navbar">
 <a class="navbar-brand" href="SpectraHelpCenter.html">
 <img src="HCImages/SpectraLogo_Darkbg.png" height="30" alt="Lighthouse Spectra">
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerSpectra" aria-controls="navbarTogglerSpectra"
 aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarTogglerSpectra">
 <ul class="navbar-nav mr-auto mt-lg-0">
 <li class="nav-item">
 <a class="nav-link" href="#">Article section - Article Title</a>
 </li>

 <!-- Dropdown -->
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="GetStartedLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Getting Started</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Spectra Introduction</a>
 <a class="dropdown-item" href="#">Spectra Support</a>
 <a class="dropdown-item" href="#">Spectra Roles</a>
 </div>
 </li>

 <!-- Dropdown -->
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="MatterLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Spectra Matters</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Matter Creation &amp; Settings</a>
 <a class="dropdown-item" href="#">Adding and Assigning Team Members</a>
 </div>
 </li>
 >
 <!-- Dropdown -->
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="DataProcessLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Data Ingestion &amp; Processing</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Data Ingestion &amp; Custodians</a>
 <a class="dropdown-item" href="#">Data Processing &amp; Reports</a>
 </div>
 </li>

 <!-- Dropdown -->
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="ImagingProdLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Imaging, Productions &amp; Exports</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Imaging Settings</a>
 <a class="dropdown-item" href="#">Productions &amp; Exports</a>
 </div>
 </li>
 </ul>
 </div>
 </nav>

 </header>

 <main class="mt-5">

 <!--Main layout-->
 <div class="container">
 <div class="row">

 <!--Main column-->
 <div class="col-lg-10 col-md-12">

 <!-- Article title goes here -->
 <h1 class="pt-5 h1-responsive">Article title</h1>

 <br>
 <!--Overview-->
 <section id="overview">
 <div class="post-wrapper">

 <h2 small>Overview</h2>
 <hr>

 <!--Enter text that describes the artlicle at a high level-->
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos
 hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus,
 impedit.</p>

 <br>

 </div>
 </section>
 <!--/.Overview -->

 <!--How to section 1-->
 <section id="how1">
 <div class="post-wrapper">

 <h2 small>How do I ...?</h2>
 <hr>

 <!--Enter text here that describes the How to guide-->
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos
 hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus,
 impedit.</p>

 <br>

 <!-- Enter the step text and description -->
 <h3>First step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Half size screenshot image -->
 <div class="row">
 <div class="col-6">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Enter the step text and description -->
 <h3>Second step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Full size screenshot image -->
 <div class="row">
 <div class="col-10">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Enter the step text and description -->
 <h3>Third step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Enter steps for this type of format here -->
 <dl class="row">
 <dt class="col-sm-3">Step or option</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>

 <dt class="col-sm-3">Step or option</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>
 <dd class="col-sm-9 offset-sm-3">This line represents a hard return for this step.</dd>

 <dt class="col-sm-3">Step or option without truncated text</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>

 <dt class="col-sm-3 text-truncate">Step or option with truncated text</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action. This also demonstrates a wrapped sentence and how it differs from a
 hard return line as demonstrated in the second step above.</dd>
 </dl>

 <!-- Half size screenshot image -->
 <div class="row">
 <div class="col-6">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Enter the step text and description -->
 <h3>Fourth step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Enter ordered steps here -->
 <ol>
 <li>Step or option here</li>
 <li>Step or option here</li>
 <li>Step or option here</li>
 <li>Step or option here</li>
 </ol>

 <!-- Full size screenshot image -->
 <div class="row">
 <div class="col-10">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 </div>
 </section>
 <!--/.How to section 1-->

 <br>
 <br>

 <!--How to section 2-->
 <section id="how2">
 <div class="post-wrapper">

 <!-- Enter title -->
 <h2 small class="text-muted">How do I ...?</h2>
 <hr>

 <!--Enter text here that describes the How to guide-->
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, officia omnis. Vero nihil neque dignissimos
 hic voluptas quisquam amet porro, similique libero ullam veritatis tempora cumque voluptates harum. Repellendus,
 impedit.</p>

 <br>

 <!-- Change the step text and description -->
 <h3>First step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Half size screenshot image -->
 <div class="row">
 <div class="col-6">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Change the step text and description -->
 <h3>Second step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Full size screenshot image -->
 <div class="row">
 <div class="col-10">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Change the step text and description -->
 <h3>Third step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Enter steps for this type of format here -->
 <dl class="row">
 <dt class="col-sm-3">Step or option</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>

 <dt class="col-sm-3">Step or option</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>
 <dd class="col-sm-9 offset-sm-3">This line represents a hard return for this step.</dd>

 <dt class="col-sm-3">Step or option without truncated text</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action.</dd>

 <dt class="col-sm-3 text-truncate">Step or option with truncated text</dt>
 <dd class="col-sm-9">Provide description here
 <strong>emphasizing</strong> the action. This also demonstrates a wrapped sentence and how it differs from a
 hard return line as demonstrated in the second step above.</dd>
 </dl>

 <!-- Half size screenshot image -->
 <div class="row">
 <div class="col-6">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 <br>
 <br>

 <!-- Change the step text and description -->
 <h3>Fourth step or option</h3>
 <p>Provide description of step here with or without relative image below being sure to
 <strong>emphasize</strong> the actions.</p>

 <!-- Enter ordered steps here -->
 <ol>
 <li>Step or option here</li>
 <li>Step or option here</li>
 <li>Step or option here</li>
 <li>Step or option here</li>
 </ol>

 <!-- Full size screenshot image -->
 <div class="row">
 <div class="col-10">
 <div class="view overlay z-depth-1-half">
 <img src="HCImages/example.jpg" class="img-fluid " alt="">
 </div>
 </div>
 </div>

 </div>
 </section>
 <!--/.How to section 2-->

 <br>
 <br>

 <!--Roles and Permissions-->
 <section id="role1">
 <div class="post-wrapper table-responsive">

 <h2 small>Roles &amp; Permissions</h2>
 <hr>

 <!-- Enter a brief description of roles and permissions. Be sure the html link to the article is correct. -->
 <p>Breif discription with link to complete
 <a href="RolesPermissions.html">Roles and Permissions</a> article.</p>

 <br>

 <!-- Use this table for roles and permissions and provide a breif description. -->
 <h3>Feature permission title</h3>
 <p>Provide description of feature roles and permissions here.</p>

 <table class="table table-sm table-striped">
 <thead>
 <tr>
 <th>Action</th>
 <th>Client Admin</th>
 <th>Discovery Manager*</th>
 <th>Reviewer*</th>
 </tr>
 </thead>

 <tbody>
 <tr>
 <td scope="row">Action description</td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 </tr>

 <tr>
 <td scope="row">Action description</td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 <td>
 <i class="fa fa-check" aria-hidden="true"></i>
 </td>
 </tr>

 <tr>
 <td scope="row">Action description</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>

 </tbody>
 </table>

 <p>
 <em>*Note: These roles only have these permissions within Matters they have been granted access to.</em>
 </p>

 </div>
 </section>
 <!--/.Roles and Permissions-->

 <br>
 <br>

 <!--Training and Documents -->
 <section id="train">
 <div class="post-wrapper table-responsive">

 <h2 small>Training &amp; Documents</h2>

 <hr>

 <!-- Enter a brief description about training and documents found here. Provide links to additional training. -->
 <p>Breif discription about training options and documents that can be downloaded.</p>

 <br>

 <!-- Training videos -->
 <h3>Training videos and user guides</h3>

 <div class="row mt-5 ml-2 mr-2">

 <!--Trainin video link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card vidoe image-->
 <div class="view overlay">
 <img src="HCImages/SpectraVidLogo.png" class="card-img-top" alt="">
 </div>

 <!--Card video content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Video title</h4>
 <!--Text-->
 <p class="card-text">High level video explaination goes here.</p>
 <a href="VideoTemp.html" class="btn btn-lh-primary">
 <i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Training video link cards-->

 <!--Trainin video link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card vidoe image-->
 <div class="view overlay">
 <img src="HCImages/RelativityLogo.jpg" class="card-img-top" alt="">
 </div>

 <!--Card video content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Video title</h4>
 <!--Text-->
 <p class="card-text">High level video explaination goes here.</p>
 <a href="VideoTemp.html" class="btn btn-lh-primary">
 <i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Training video link cards-->

 <!--Trainin video link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card vidoe image-->
 <div class="view overlay">
 <img src="HCImages/BrainspaceLogo.png" class="card-img-top" alt="">
 </div>

 <!--Card video content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Video title</h4>
 <!--Text-->
 <p class="card-text">High level video explaination goes here.</p>
 <a href="TVideoTemp.html" class="btn btn-lh-primary">
 <i class="fa fa-film mr-2 white-text" aria-hidden="true"></i>Watch video</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Training video link cards-->

 </div>
 <!--/Training videos-->

 <br>

 <!-- Documents -->
 <h3>Documents</h3>

 <div class="row mt-5 ml-2 mr-2">

 <!--Document link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card document content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Document title</h4>
 <!--Text-->
 <p class="card-text">High level document explaination goes here.</p>
 <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary">
 <i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Document link cards-->

 <!--Document link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card document content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Document title</h4>
 <!--Text-->
 <p class="card-text">High level document explaination goes here.</p>
 <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary">
 <i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Document link cards-->

 <!--Document link cards-->
 <div class="col-lg-4 col-md-12 mb-4">

 <!--Card-->
 <div class="card">

 <!--Card document content-->
 <div class="card-body">
 <!--Title-->
 <h4 class="card-title">Document title</h4>
 <!--Text-->
 <p class="card-text">High level document explaination goes here.</p>
 <a href="Documents/RolePermissions.xlsx" class="btn btn-lh-primary">
 <i class="fa fa-download mr-2 white-text" aria-hidden="true"></i>Download document</a>
 </div>

 </div>
 <!--/.Card-->

 </div>
 <!--/Document link cards-->

 </div>
 <!--Grid row-->

 </div>

 </section>
 <!--/.Training and Documentation-->

 <br>
 <br>

 </div>

 <!-- Right Sidebar -->
 <div class=" pt-5 col-md-2">

 <!-- Scrollspy-->
 <div id="scrollspy" style="position: fixed; top: 90px; width: 200px; z-index: 2;">

 <ul class="nav nav-pills default-pills smooth-scroll" data-allow-hashes="true">
 <li class="nav-item">
 <a class="nav-link active" href="#overview">Overview</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#how1">How To Guide 1</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#how2">How To Guide 2</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#role1">Roles &amp; Permissions</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#train">Training &amp; Documents</a>
 </li>
 </ul>

 </div>

 </div>

 <div class="col-md-10">
 <!--/. Right Sidebar -->

 </div>

 </div>

 </div>

 </main>

 <!-- Footer -->
 <footer class="page-footer font-small bg-primary">

 <div class="container">
 <div class="row">
 <div class="mt-2 col-md-8">
 <p>© 2018
 <a target="_blank" href="https://www.lighthouseglobal.com">Lighthouse</a&gt;. All Rights Reserved.</p>
 </div>
 <div class="mt-2 col-md-4">
 <div class="social-section text-center text-md-right">
 <p>
 <a class="mr-xl-4" target="_blank" href="https://www.lighthouseglobal.com/privacy-policy">Privacy Policy</a>
 <a class="mr-xl-4" target="_blank" href="https://www.lighthouseglobal.com/terms-of-use">Terms of Use</a>
 </p>
 </div>
 </div>
 </div>
 </div>

 </footer>

Best,
Piotr


mpardike pro commented 6 years ago

Awesome! Looks like it works. I will check it out to see what I was doing wrong. Thanks!

mpardike pro commented 6 years ago

Hey Piotr, There was one last issue, the scrollspy is no longer responsive and doesn't disappear when I resize the screen like it used to. I assume this is due to fixing it to the top of the screen. Do I fix this in the css? Thanks, Melissa

Piotr Glejzer staff commented 6 years ago

@media (max-width: 991px){ #scrollspy{ display: none; } } Is that want you need?

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags