Banner Section
Description
The page banner section contains the BNL logo, the site title, the DOE logo, and the local website's primary navigation bar.
Location of Code
This banner's HTML code is located in /common/templates/bannerNav/bannerNav_SITE-NAME.inc.
This file also contains the site's main navigation menu, which is not described here.
The CSS that styles the banner section is located in /common/templates/global/css/BNL-master-styles.css.
Additional Notes
The <div id="stripe"> is located outside any grid container and therefore
will span 100% of the width of the browser window.
A <div class="grid_12" id="banner"> is located within <div id="stripe">
and will contain the BNL logo, the site title, the DOE logo, and the
site's navigation menu.
NOTE: This code is found in the /common/templates/bannerNav/bannerNav_SITE-NAME.inc file.
This file also contains the site's main navigation menu, which is not described here. (The nav menu code has been grayed out, below.)
Learn all about the main navigation menu here.
<div id="stripe"> <div class="container_12" id="banner"> <div id="identifiers"> <div class="grid_10" > <a id="bnlLogoLink" title="BNL Homepage" href="http://www.bnl.gov"> <img id="BNLlogo" title="BNL Homepage" src="/common/templates/images/bnllogo/bnllogo-template-160px.png" /></a> <div id="siteTitleContainer">BNL Webpage Templates<span class="small">BNL Web Services Group</span></div> </div><!--grid_10--> <div class="grid_2"> <a title="DOE Office of Science" href="http://science.energy.gov/"> <img id="DOElogo" title="DOE Office of Science" src="/common/templates/images/doelogo/doelogo-template-143px.png" /></a> </div><!--grid_2--> </div><!--identifiers--> <div class="grid_12"> <div id="navcontainer"> <ul id="navlist"> <li><a id="topMenuLink1" class="topMenuLink" href="Some URL">Link 1</a></li> <li><a id="topMenuLink2" class="topMenuLink" href="Some URL">Link 2</a></li> <li><a id="topMenuLink3" class="topMenuLink" href="Some URL">Link 3</a></li> <li><a id="topMenuLink4" class="topMenuLink" href="Some URL">Link 4</a></li> <li><a id="topMenuLink5" class="topMenuLink" href="Some URL">Link 5</a></li> Additional list items as required ... </ul> </div><!--navContainer--> <div class="clear"></div> <!-- This has to be here to get bkg color bar to take effect in Firefox --> </div><!--grid_12--> </div><!--container_12--> </div><!--stripe--> <div class="container_12"> <div class="grid_12" id="menuPanelsContainer"> <div id="topMenu1" class="menuContainer"> <ul> <li><a href="Some URL">Link 1</a></li> <li><a href="Some URL">Link 2</a></li> <li><a href="Some URL">Link 3</a></li> Additional list items as required ... </ul> </div><!--menuContainer--> <div id="topMenu2" class="menuContainer"> <ul> <li><a href="Some URL">Link 1</a></li> <li><a href="Some URL">Link 2</a></li> <li><a href="Some URL">Link 3</a></li> Additional list items as required ... </ul> </div><!--menuContainer--> <div id="topMenu3" class="menuContainer"> <ul> <li><a href="Some URL">Link 1</a></li> <li><a href="Some URL">Link 2</a></li> <li><a href="Some URL">Link 3</a></li> Additional list items as required ... </ul> </div><!--menuContainer--> Additional menuContainer divs as required ... </div><!--grid_12--> </div><!--container_12--> <div class="container_12" id="navSpacer"></div><!-- required for margin between stripe and page content -->
The following styles are contained in
/common/templates/global/css/BNL-master-styles.css.
/* STRIPE AND BANNER */
#stripe {
width: 100%;
background-image: url('/common/templates/images/stripes/stripe-template2.jpg');
background-color: #03548F;
background-repeat :repeat-x;
margin-bottom: 0px;
}
#banner {
background-repeat: no-repeat;
height: 145px; /* ! Without this, the bkg disappears */
margin: 0px auto 0px auto;
}
#identifiers { height:110px; } /* This holds the logo area open so nav doesn't float above bottom of div.stripe */
/* BNL LOGO */
a#bnlLogoLink { text-decoration: none; }
#BNLlogo {
float:left;
margin-top:26px;
margin-right:20px;
}
/* SITE TITLE IMAGE */
#siteTitle { margin: 43px 0px 0px 0px; } /* Remove when we go to embedded fonts */
/* SITE TITLE */
#siteTitleContainer {
margin: 39px 0px 0px 0px;
font-size: 26px;
line-height: 26px;
font-family: 'Open Sans', Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
font-style: italic;
color: #fff;
}
#siteTitleContainer .small {
display: inline-block;
margin-left: 20px;
font-size: 16px;
}
/* DOE LOGO */
#DOElogo {
float: right;
margin-top:33px;
}
On mobile devices, the height of the banner is reduced, the BNL logo is hidden (a different BNL
logo appears below the banner in the black bar (#mobileMenuSearchBar), the DOE logo is
hidden, and a 2px yellow border is added to the bottom of the #stripe div.
The #mobileMenuSearchBar, which is hidden on desktop browsers is displayed just
below the #stripe on mobile browsers and contains buttons to display the menu (both global navigation
and the local site navigation) as well as the search form.
mobile.css
/* ----- BANNER AND STRIPE ELEMENTS ----- */
#stripe {
width: 100%;
min-width: inherit;
/*
border-top-left-radius: 8px;
border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
*/
border-bottom: 2px solid #FC3;
height: auto;
}
#banner {
width: 100%;
height: auto;
min-height: 50px; /* ! Without this, the bkg disappears */
background-image: none !important; /* Don't use site-specific banner image (e.g. Photon Sciences site) */
}
#identifiers {
height: auto;
display: block;
padding-bottom: 10px;
}
a#bnlLogoLink,
#BNLlogo,
#DOElogo { display: none; }
#siteTitleContainer {
display: block;
margin: 0px 0px 0px 0px;
padding-top: 10px;
width: 100%;
text-align: center;
}
#siteTitleContainer .small {
display: block;
margin: 5px 0px 0px 0px;
text-align: center;
width: 100%;
}
