Floating bar example for a WPMUdev member

Floating objects 101

by Imperative

HTML

<div class="floatingbar">
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </nav>
</div>

<header class="sitehead">This is the site header</header>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus nunc sit amet metus ultricies sodales. Nulla mollis mollis purus, et rutrum felis consequat sed. In tincidunt viverra nisi in egestas. Quisque vel orci eu mi lobortis congue a vitae tellus. Nam nec risus nec tortor congue euismod id sit amet leo. Nam laoreet ante et nunc facilisis eu posuere tortor adipiscing. Aliquam venenatis accumsan elit, quis imperdiet sem vehicula sed. Vivamus placerat ipsum a erat adipiscing sodales. Pellentesque vitae mi ut metus tristique tincidunt. Mauris dignissim nibh id metus suscipit eget luctus ipsum sodales. Vestibulum eu ante augue, nec tristique mi. In hac habitasse platea dictumst. Maecenas eget mollis felis. Pellentesque egestas, urna id porttitor ornare, nulla leo vestibulum dui, eget molestie orci tellus et quam.</p>

<p>Nunc non nibh nunc. Suspendisse potenti. Quisque vitae leo quam. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula dictum sem, eu fringilla diam vulputate sit amet. Quisque a mauris turpis.</p>

<p>Proin vel lorem massa, et rutrum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi at nisi id diam volutpat scelerisque eu et leo. Vivamus eleifend est nulla, sit amet fringilla diam. Pellentesque et eros lacus, ut accumsan nulla. Nulla posuere eros sit amet dolor elementum ullamcorper. Maecenas sed dui ipsum, pulvinar semper magna.</p>

<p>Aenean dui dui, venenatis ac imperdiet quis, consectetur a urna. Quisque neque dolor, faucibus eu porta vel, posuere ac nisi. Cras sed nisl lectus, at elementum elit. Fusce...

CSS

body {padding-top: 30px;}

.floatingbar {
    position: fixed;
    margin: 0 auto;
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
    background: rgb(20,20,20);
    color: rgb(230,230,230);
    font-family: sans-serif;
    line-height: 25px;
}

/* Navigation For Floating Bar */

div.floatingbar nav {
    margin-left: 15px;
}

div.floatingbar nav ul {
    -webkit-padding-start: 0px;
    list-style: none;
    margin: 0;
}

div.floatingbar nav ul li {
    display: inline-block;
    margin-right: 12px;
}

.floatingbar li a, .floatingbar li a:visited, .floatingbar li a:active {
    color: white;
    text-decoration: none;
}

.floatingbar li a:hover {
    color: yellow;
}

.sitehead {
    background: slateblue;
    height: 150px;
}