Menus

It is recommended to place menus horizontally in the section just below the ORNL logo bar.

Try to keep menu titles as short as possible. For example, “News and Information” could simply be “News.”  Shorter titles allow for a cleaner look and quicker navigation for users.

 

 

Resources

Code


<ul class="nav navbar-nav">
<li class="menu-item"><a href="/">Home</a></li>
<li class="menu-item"><a href="/about">About</a></li>
<li class="menu-item"><a href="/science-areas">Science Areas</a></li>
<li class="menu-item"><a href="/divisions">Divisions</a></li>
<li class="menu-item"><a href="/contact">Contact</a></li>
</ul>

CSS

   
.nav.navbar-nav {
  float: right;
}
.navbar-nav > li {
    padding: 0px 15px;
}
.nav.navbar {
    background: white;
    min-height: 40px;
}
.navbar-nav > li > a {
    color: darkgreen;
    line-height: 40px;
    text-transform: uppercase;
    font-size: 12px;
}