#navi-bar

Description

The ID of the optional top Wikidot toolbar with the Wikidot logo

Containers

Outline
Image Unavailable
Click to view in closer detail!

Details

The Wikidot toolbars can be optionally turned on or off using the Site Manager. The #navi-bar id specifically styles the top toolbar, shown at the top of this page. The top toolbar is normally fixed to the page (meaning it follows as you scroll) and generally contains the Wikidot logo.

Note: According to the Wikidot Terms of Service, "covering or obscuring any of the advertisement boxes or Toolbars via CSS style modification or any other technique" is prohibited. If you want to disable the Toolbars, use the Site Manager instead.

Examples

While you may be prohibited from obscuring the toolbar with CSS, nothing says that you cannot change the color. The toolbar on this page has been given a solid grey color using the following code:

#navi-bar{    background: #777; }

Try It on the CSS Zone Sandbox!

Base CSS

#navi-bar {
    font-size: 12px;
    font-family: verdana, arial, helvetica;
    height: 24px;
    background-color: #CCC;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: bottom;
    border-bottom: 1px solid #444;
    color: #000;
    position:fixed;
    top:0px;
    width:100%;
    z-index:9999;
    overflow:hidden;
}
 
#navi-bar a {
    color: #119;
    background: transparent;
    padding:0; margin:0;
    text-decoration: none;
}
 
#navi-bar a:hover {
    background-color: transparent;
    text-decoration: none;
}
 
#navi-bar a.logo {
    position: absolute;
    left: 13px;
    top: 2px;
    width: 71px;
    height: 20px;
    background-image: url(../../../common--images/navibar/logo20.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='../../../common--images/navibar/logo20.png');
    z-index: 999;
}
 
#navi-bar a.logo span {
    display: none;
}
 
#navi-bar .new-site {
    position: absolute;
    left: 120px;
    top: 3px;
}
 
#navi-bar .new-site input.text{
    width: 120px;
    text-align: center;
}
 
#navi-bar .new-site input.empty{
    color: #666;
}
 
#navi-bar .share {
    position: absolute;
    left: 370px;
    top: 4px;
}
 
#navi-bar .share span {
    vertical-align: 3px;
}
 
#navi-bar .share img {
    width: 16px;
    height: 16px;
}
 
#navi-bar .action-buttons {
    display: block;
    position: absolute;
    top: 2px;
    right: 120px;
    height: 14px;
    padding: 2px;
    color: #000;
}
 
#navi-bar .action-buttons a {
    padding: 0 3px;
    color: #000;
}
 
#navi-bar .join {
    display: block;
    position: absolute;
    left: 570px;
    top: 4px;
    color: #000;
    font-weight: bold;
}
 
#navi-bar .random-site {
    display: block;
    position: absolute;
    top: 2px;
    right: 50px;
    height: 14px;
    padding: 2px;
    /*border: 1px solid #444;
    background-color: #F5F5F5;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: center 50px;*/
    color: #000;
}
 
#navi-bar .random-site:hover {
    border-color: #000;
}
 
#navi-bar .close {
    position: absolute;
    right: 5px;
    top: 5px;
}

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License