PHP + CodeIgniter: Bootstrap nav-link active for sub directory

Question

New to Bootstrap here. I've been trying for a few hours now. Maybe there is something simple I am missing.

Basically, I'm trying to keep nav-link active when browsing in a sub-directory.

When I click on "Accounts" ( site.com/accounts ) it correctly marks nav-link as active .

Accounts is a list of accounts.

When I click on one of the accounts from the list we should go to the account ( site.com/accounts/0000734174 ) but the Accounts nav-link in the sidebar is no longer active.

How do I keep it active while keeping the href "/accounts", because in my mind it should be. There are thousands of accounts and we wouldn't want a drop-down child nav-link for each.

Do I have the concept wrong? please help. Thanks

edit: let me add this is routed with code igniter as:

$route[ 'accounts/(:num)' ] = "accounts_details";
$route[ 'accounts' ] = "accounts_list";

And let me add what I've tried. different Jquery snippets found here on SO, different CSS failures, different routing ideas. And also this is in CoreUI Template using CodeIgniter framework.

More details: HTML-

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

CSS-

.sidebar .nav-link.active {
  color: #fff;
  background: #3a4248;
}

Answer 1

Update 1

Yep, you're on the wrong track. It's definitely not a Bootstrap issue.

however your comment about using one controller instead of two is a fine answer. And if it works, it's good. But, we have no idea of how CodeIgniter is setting the nav-link to active, so I think this is a good chance to learn about CodeIgniter and the Model-View-Controller architecture.

I don't know CodeIgniter, but looking at their docs, I'm guessing you're including the sidebar as a partial .

In your view pages (probably application/views/accounts_details and application/views/accounts_list ) or in your controller, you must have some sort of call to a sidebar view.

What you want to do is set a PHP variable in your controller(s) and make that available to your views :

$data = array('active' => 'active');
$this->load->view('main_view', $data);

Then in your sidebar code, check for that variable.

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link <?php echo $active; ?>" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

I don't know CodeIgniter, but I think this tutorial will help .

Original Post

This is not a Bootstrap issue.

Bootstrap is styling whatever has the proper classes or DOM structure:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a> <---- the 'active' class makes it pretty
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

But, as Bootstrap even points out , they don't handle styling .active in any special way:

"The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling."

In whatever language you're writing this in, you need to make sure you are adding the proper class to the proper element when the route includes "/accounts".

This could be done in Javascript using window.location to tell if the URL includes "/accounts/" and then using .addClass() to add the class active to that tag.

But, if you're using Angular, React, Vue, etc., there's probably a better way to do this within that language framework.

However, without seeing your HTML, I'm just guessing that CoreUI is using .active on the class to style your code this way.

Update your question with more code (HTML, CSS, JS) and a language and I'll gladly add some detail here.