Topic: scrollspy sticky not working
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?
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 & 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 & Processing</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Data Ingestion & Custodians</a>
<a class="dropdown-item" href="#">Data Processing & 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 & 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 & 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 & 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> </td>
<td> </td>
<td> </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 & 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 & Permissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#train">Training & 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>
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, MelissaPiotr Glejzer staff commented 6 years ago
@media (max-width: 991px){
#scrollspy{
display: none;
}
}
Is that want you need?
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!
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
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, PiotrPiotr 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, Piotrmpardike 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 & 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 & Processing</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Data Ingestion & Custodians</a> <a class="dropdown-item" href="#">Data Processing & 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 & 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 & 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 & 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> </td> <td> </td> <td> </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 & 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 & Permissions</a> </li> <li class="nav-item"> <a class="nav-link" href="#Training and Documents">Training & 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>