Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Styling FrontPage Navigation

Adding Style to FrontPage navigation bars


The CSS for the Vertical and Horizontal Navigation bars

Vertical Navigation Bar

#rightnav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: black;
font-weight: bold;
width:135px;
float: right;
padding-top:40px 0 3em 0; //for positioning the nav bar.
}
#rightnav a {
background: #ffff00;
display: block;
text-decoration: none !important;
width: 125px;
margin-top: 3px;
margin-bottom: -1em;
padding: 0;
border: none;
border-bottom: 2px solid red;
}

Horizontal Navigation Bar

Home ] About ] Privacy ] Site Map ] Contact ] Cookie Policy ]
#botnav {
font-size: 1px;
color: white; 
background: white; 
margin: 0; 
text-align: center;
}
#botnav a {
text-decoration: none; 
background:#ffff00;
margin: 0; 
padding: .22em; 
border: 2px solid red; 
font-weight: bold; 
font-size: x-small; 
display: block; 
width: 14%; 
white-space: nowrap;
float: left;
}
#botnav a:hover {
color: green; 
border: 2px solid green;
}

Both navigation bars on this page use Children Under Home. If this page were included in the navigation bars, the horizontal bar would show it as a blip  - the font is sized as 1px, which would appear (if it appears at all) as a very thin line. The horizontal bar may look satisfactory, but its use is limited.