OU Campus Top Nav Reference Guide
The top nav file for each site section is located in the the file is located in the section's _resources folder. It's named /_topNav.inc.
To customize a top nav, copy and paste the elements below in the order you'd like that you'd like them to appear in the menu.
Required Code
Make sure to include the below line of code at the top of each top nav file. Adding the code will prevent users from editing the top nav file in the WYSIWYG editor, which can cause any icons in the header to be removed:
<!-- ouc:editor csspath="/_resources/ou/editor/nav.css" cssmenu="/_resources/ou/editor/styles.txt"/ wysiwyg="no" -->Code For a Basic Top Nav Link
To create a single text link in a top nav, paste the following line of code and replace the bolded text:
<li class="nav-item"><a class="nav-link" title="link title" href="#">link text</a></li>Code For a Top Nav Dropdown Menu Item
To create a top nav dropdown menu item, paste the following line of code and replace the bolded text. Duplicate the highlighted text for each desired menu list item (one after another).
<li class="nav-item dropdown dropdown-hover">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1col" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">menu item title<i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i></a>
<div class="offcanvas-collapse-sub">
<div class="offcanvas-header px-2">
<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
<div class="align-self-center mx-3">menu item title for mobile</div>
</div>
<ul class="dropdown-menu list-unstyled" id="navbarDropdown1col">
<li><a class="dropdown-item" title="link title" href="#">link text</a></li>
</ul>
</div>
</li>Code For a Top Nav Dropdown Menu Item with Icons
To create a top nav dropdown menu item with icons, paste the following line of code and replace the bolded text. Duplicate the highlighted text for each desired menu list item (one after another).
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2col" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
menu item title<i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i>
</a>
<div class="offcanvas-collapse-sub">
<div class="offcanvas-header px-2">
<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
<div class="align-self-center mx-3">menu item title for mobile</div>
</div>
<ul class="dropdown-menu list-unstyled" id="navbarDropdown2col" style="min-width: 275px;">
<li><a class="dropdown-item" href="#"><i class="Font Awesome class" style="width: 1.4em; display: inline-block;"></i>link text</a></li>
</ul>
</div>
</li>Code For A Right-Aligned Top Nav Button
To create a right-aligned button in the top nav, paste the following line of code at the end of the file and replace the bolded text:
<li class="nav-item ml-lg-auto mr-lg-3 mt-4 mt-lg-0">
<a class="nav-link nav-btn bg-bright-light" title="button title" href="#">button text</a>
</li>