Navigation

QUEENS' navigation includes two types, top and side. To add top navigation to your website, use a nav tag with a class of “top-navigation”

HTML Example
    <nav class="top-navigation">...</nav>
                       

To add side navigation to your website, use the class “side-navigation”

HTML Example
    <div class="side-navigation">...</div>
                       

To take advantage of QUEENS' mobile responsive drawer navigation, identify the navigation items that you’d like to appear on mobile, then use the id “mobile-navigation”

HTML Example
    <ul id="mobile-navigation">...</ul>
                       

Then, outside of the mobile nav, place an icon that will open the drawer. Use the the javascript function onclick=”openNav()”

HTML Example
    <img width="30px" class="push-right mobile-only" onclick="openNav()" role="navigation" alt="navigation drawer" src="path/to/your-nav-icon"/>
                       

Notice that in this example, the classes of push-right and mobile-only are also applied. Learn more about these classes in the containers section of this reference.