Bootstrap 4 nav-pills active using include page

Question

I'm working on a internal website for the company I work for and my manager wants me to have the Menu as a jsp include page instead of it being coded into the page like this(which works).

<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>

<div class="sidenav">
   <div class="nav flex-column nav-pills" aria-orientation="vertical">
    <ul class="nav flex-column">      
    <li class="nav-item">
        <a class="nav-link disabled">Marketing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
    </li>
    </ul>
  </div> 
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>

<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%" 
height="100%"></iframe>
</div>

He wants it to look more like this.

<head>

<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>

</head>

<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>

<div class="sidenav">
  <jsp:include page="/jsp/marketing/TestMenu.jsp"
</div>

<div class="mainHeader">
  <h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>

<div class="tab-content main1">
 <iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%" height="100%"></iframe>
</div>

</body>

This is the TestMenu.jsp

<div class="nav flex-column nav-pills" aria-orientation="vertical">
    <ul class="nav flex-column">      
    <li class="nav-item">
        <a class="nav-link disabled">Marketing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
    </li>
    </ul>
 </div>

My nav pills go active but they don't take me to the actual pages. But if I remove the active from the TestMenu the links work. It's such a small thing that I'm trying to accomplish which is highlighting the proper pills and I just need help figuring it out. Or at least point me in the right direction.

Even though I'm in the 2020 Corporate Calendar page it shows Project Team Guidelines highlighted.

adding a working demo code might help to understand where problem exists. — Swati, Jun 11 '20 at 13:02
@Swati I'm not sure how to add multiple pages using Stack Snippets. I would need to include the sidenav menu pages along with the TestMenu.jsp in order to see it in action. — Ramiro, Jun 12 '20 at 15:57
I think problem here is with path ,as your navbar is inside some folder you need change your path accordingly. Hover on `a` tag and see what path it's showing . — Swati, Jun 12 '20 at 17:00
But the paths work the only think that doesn't seem to work is changing the active pill to the proper pill-tab. I'll post a picture. — Ramiro, Jun 12 '20 at 17:28
do you have written any script to apply active class to your tab? — Swati, Jun 13 '20 at 03:54
@Swati do you know what script I should have to apply active class to the tab? — Ramiro, Jun 17 '20 at 16:06
Maybe something like [this](https://stackoverflow.com/questions/31087198/add-active-class-to-main-menu-using-javascript) . Current how do you apply active class to tab ? — Swati, Jun 18 '20 at 07:11
@Swati now would this be going in between in the jsp or in a Javascript file? I'm sorry I've never used Javascript before. — Ramiro, Jun 18 '20 at 15:15

Bootstrap 4 nav-pills active using include page

0 Answers0