"Header Code July 15, 2014"
Bootstrap 3.2.0 Snippet by rhondak

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='row'> <div class='span12' id='scflogo'> <img alt='SCF Libraries' src='https://sites.google.com/site/scfimages/home/Screen%20Shot%202014-07-07%20at%2011.16.59%20AM.png'> <id='titleImageCaption'> <a href="https://portal.scf.edu/cp/home/displaylogin" class="btn btn-info btn-small"><i class="icon-white icon-th"></i> SCF Connect</a> </div> <!-------------WHERE THE SEARCH AND DROP DOWN BOX STARTS----> <div class="row"><div class="col-xs-12"> </div> <nav class="navbar navbar-default" role="navigation"> <div class="container-max-width: 900px"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"><button class="navbar-toggle" data-target="#LG-collapse" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"> </span> <span class="icon-bar"> </span></button> <a class="navbar-brand" href="#"> <i class="fa fa-home"> </i> </a> </div><!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="LG-collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active"> <a target="_blank" title="Search for books, eBooks, video, eVideo and more." href="http://www.linccweb.org/Discover?lib_code=FLCC1500"> Library Catalog </a> </li> <li> <a target="_blank" title="Find Library Hours and Contacts." href="http://libguides.scf.edu/libary_hours_staff_local_libraries_location">Contact & Hours</a></li> <li class="dropdown"> <a class="dropup-toggle" data-toggle="dropdown" href="#"> Help... </a> <ul class="dropdown-menu"> <li> <a target="_blank" title="What is my SCF Log In?" href="http://libguides.scf.edu/how_to_sign_in_to_SCF_Library_resources">How to Log In </a> </li> <li> <a target="_blank" title="Need to find a Peer Reviewed or Scholarly article? Here's 3 ways!" href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library">How to Find Scholarly Articles</a> </li> <li> <li class="divider"> </li> <li> <a target="_blank" title="Citation help for MLA, APA, ASA and AMA." href="http://libguides.scf.edu/writing_citing_mla_apa_citation">How to Cite your Work</a> </li> <li class="divider"> </li> <li> <a target="_blank" title="Renew books, check on requests and due dates." href="http://www.linccweb.org/myaccount?lib_code=FLCC1500">Your Account</a> </li> <li> <a target="_blank" title="Answers to the most asked Library HOW TO questions." href="http://libguides.scf.edu/FAQs-Stageview">Frequently Asked Questions</a></li> <li><p style="text-align: center;"><iframe src="http://askalibrarian.org/widgets/scfms" frameborder="0" height="106" scrolling="no" width="190"></iframe></p></li></li> </ul> </li> <li class="dropdown"> <a class="dropup-toggle" data-toggle="dropdown" href="#"> Databases... </a> <ul class="dropdown-menu"> <li> <a target="_blank" title="Complete alphabetical list of SCF's dagtabases." href="http://www.linccweb.org/index.asp?screen=alpha&lib_code=FLCC1500">Databases A-Z </a> </li> <li> <a target="_blank" title="Need to know the best database for a discipline? Try these." href="http://www.linccweb.org/index.asp?screen=subject&lib_code=FLCC1500">Databases by Subject</a> </li> <li class="divider"> </li> <li> <a target="_blank" title="Want to know if a journal is available full text at SCF? Use this search." href="http://www.linccweb.org/?screen=a-z&lib_code=FLCC1500">Journals A-Z</a></li> </li> <li class="divider"> </li> <li> <a target="_blank" title="Librarian recommended expert search. This links to SCF Full Text in search results." href="http://scholar.google.com/scholar?inst=8873731101682220099">Search Google Scholar for SCF Full Text</a></li> </li> </ul> </li> <li class="dropdown"> <a class="dropup-toggle" data-toggle="dropdown" href="#"> Subject Guides and Tutorials... </a> <ul class="dropdown-menu"> <li> <a target="_blank" title="Need help with a search strategy or databases for a topic? Start here." a href="http://libguides.scf.edu/browse.php?o=s">Browse Subject List </a> </li> <li class="divider"> <li> <a target="_blank" title="Find Library support for your course by CRN or Professor." href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library">Associate Degrees/Programs</a> </li> <li> <a target="_blank" title="Find Library support for your major by name or Professor." href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library">Baccalaureate Programs</a> </li> <li><a href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library">Collegiate School</a> </li> <li> <a target="_blank" title="Need to get Library links, ideas, tutorials, instruction? This is one stop Faculty Services for all Library resources." href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library">Faculty Services</a> </li> <li class="divider"> <li>Search Subject Guides </li> <script> (function() { var cx = '000060492115051789153:loxeojrnxus'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <script> (function() { var cx = '000060492115051789153:loxeojrnxus'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> </ul> </li> </ul> <!----------- ARTICLE SEARCH ----------> <div style="text-align: center;" title="Find Articles" selected="selected" dojotype="dijit.layout.ContentPane"> <p style="text-align: center;"> <!-- State College of Florida Libraries --> </p><form action="http://www.linccweb.org/Discover" method="get" target="_new"> <input class="textField" onfocus="this.value='';" name="query" value="Search Library Catalog" type="text" /> <input name="fn" value="search" type="hidden" /> <input name="vl(2826233950UI0)" value="articles1" type="hidden" /> <input name="ct" value="search" type="hidden" /> <input name="indx" value="1" type="hidden" /> <input name="dum" value="true" type="hidden" /> <input name="reset_config" value="true" type="hidden" /> <input name="lib_code" value="FLCC1500" type="hidden" /> <input name="vid" value="FLCC1500" type="hidden" /> <input class="button" value="Go" type="submit" /> <div class="noImg body"> </div></form> </div> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
/*scfbutton drama*/ titleImageDiv { position: relative; width: 100%; /* for IE 6 */ } #titleImageCaption { position: absolute; top: 10%; left: 2%; } #titleImageButton { position: absolute; top: 75%; left: 2%; } /*scfbutton drama ends, Navigation bar begins*/ .navbar-default { background-color: #1e4e84; border-color: #4582a7; } .navbar-default .navbar-brand { color: #ecf0f1; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #052090; } .navbar-default .navbar-text { color: #ecf0f1; size: 14px; } .navbar-default .navbar-nav > li > a { color: #ecf0f1; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #5bacf6; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #052090; background-color: #4582a7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #052090; background-color: #4582a7; } .navbar-default .navbar-toggle { border-color: #4582a7; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #4582a7; } .navbar-default .navbar-toggle .icon-bar { background-color: #ecf0f1; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ecf0f1; } .navbar-default .navbar-link { color: #ecf0f1; } .navbar-default .navbar-link:hover { color: #052090; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ecf0f1; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #052090; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #052090; background-color: #4582a7; } }

Related: See More


Questions / Comments: