Small Screens Banner & Navigation Bar Fix

Banner & Nav Bar For Small Screens

Minimal Nav Bar

• Parse navbar.php
• Create individual files ( in includes/NavPages)
• AboutUs
• LocHours
• SvcProg
• BksArt
• GetHelp
• YrRecord
• QLinks
•  Create sub Includes (includes/NavPages)
• Create pages in appropriate folders
• example page: About-Nav.php in /Gen-Info/ folder
• Use only minimal info
• Include appropriate includes/NavPages file
• Create nav-minimal.php
• no drop menu
• link to new minimal pages
• may need to reduces font size
• See also: Script that works

Banner: header-minimal.php

• =    Smaller ACC Logo
• =    Reduce space over LS logo
• =    Modify ACC Links
• =    Delete ACC Links
• =    See also: Script that works

Script that works

    <header2 class="show-for-small">
<!-- This next section contains header for small screens. -->
<?php include("http://library.austincc.edu/includes/header-minimal.php"); ?>
    </header2> <!-- end of minimal header -->

    <header class="show-for-medium-up">
<!-- This next section contains header for medium up screens. -->
<?php include("http://library.austincc.edu/includes/header.php"); ?>
    </header>
 
 <topnav2 class="show-for-small">
<!-- This next section contains top navigation bar for small screens. -->
<?php include("http://library.austincc.edu/includes/nav-minimal.htm"); ?>
</topnav2> <!-- end of minimal nav -->

 <topnav class="show-for-medium-up">
<!-- This next section contains top navigation bar for small screens. -->
<?php include("http://library.austincc.edu/includes/navbar.php"); ?>
</topnav> <!-- end of drop menu nav -->

• Gather into one file (HeaderNav.php)
• Replace current separate lines of code with HeaderNav php include

Minimal Nav Bar Menus

Things that would  make the smaller screens look and work better, maybe:

• Use the same mechanism as with hiding the left side bar on 2nd tier pages to hide the navbar.php and show the minimal nav bar file.  (http://foundation.zurb.com/docs/v/4.3.2/components/visibility.html)
• To be created nav-minimal.php
• each entry 
• no drop menu
• link to a page with nothing but links that would be on the drop menu
• make all equal size so will display neatly
• note: they are already of equal size
• maybe need fewer?? or smaller font
• Think also about making the banner smaller by hiding and showing
• smaller ACC logo
• reduce space over LS logo
• leave ACC home off ACC links??
• See mind map (http://irtstaff.austincc.edu/peloquin/a-web/SmallScreensNavBanner.pdf)