Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Edit your theme's existing app/navbar/navbar.component.html file. This file defines the entire <nav> which displays the navigation header across the entire DSpace site.  While much of the content in this <nav> is loaded dynamically via other Angular components, it is possible to easily add a hardcoded link to the existing header.  Find the section of this <nav> which is the <div id="collapsingNav">, as that's where you'll want to add your new link.  See inline comments in the example below.

    Code Block
    titlenavbar.component.html
    <nav>
    ...
       <!-- This DIV is where the header links are added dynamically. 
            You should see it surrounding all links in the header if you view HTML source -->
       <div id="collapsingNav" ... >
        <!-- The links themselves are in an unordered list (UL) --> 
        <ul class="navbar-nav" ... >   
           ...
           <!-- Add your new link at the end (or beginning) of this UL in a new LI tag -->
           <!-- NOTE: All classes used below are the same Bootstrap CSS classes used by our 'dspace' and 'custom' themes. 
                You can modify them if the link doesn't look correct in your theme. -->
           <li class="nav-item d-flex align-items-center">
              <div class="text-md-center">
                <a href="httpshttp://dspace.org" class="nav-link">DSpace.org</a>
              </div>
           </li>
        </ul>
       </div>
    </nav>


  2. Obviously, you can also make additional modifications to the HTML of the header in this file, as necessary for your navigation header.  Keep in mind though that anything you remove may impact the dynamic content that is pulled into this navigation header. 
    1. An example is that the header logo for the "dspace" theme also exists in this same file. 
  3. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn start:dev), then the UI will restart automatically whenever changes are detected.

...