Search code examples
navigationfixed

fixed <ul> as navigation bar


I am making this website and I want this navigation bar to be fixed. I've searched SO and found the solution of adding "position: fixed" but it is not working. When I go to "About" then "History", it redirects to the other page but the navigation bar disappears. How can I change the code so the navigation bar does not disappear? I want the bar to be on every page of my project.

I'm new to CSS and HTML as well as the SO here.

#nav {
    position:fixed;
    left:0px;
    top:200px;
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }
#nav li {
    float: left; 
         }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; 
        }
#nav li a:hover {
             color: #c00;
             background-color: #fff; 
        }
.About:hover ul {
                 display: block;
                 }
.About ul {
           top: 40px;
           display: none;
           list-style-type: none;
          }

This is the HTML

<ul id="nav">
<li class="About"><a>About</a>
        <ul>
            <li><a href="historia.php">History</a></li>
            <li><a href="">Find Us</a></li>
    </ul>
</ul>

Solution

  • You must clarify Your question. If You need the navigation to be fixed on the page (You scroll the page down, the navigation stay at the same position), or You need the navigation to be on every page of Your project. Shortly: The first one is done using position: fixed. The second one must be done using server scripting language, for example PHP and include. Clarify Your question, and U will obtain the full answer :).

    Sorry, to less reputation to make a comment only.

    UPGRADE:

    Ok, very simple answer: You must have other file only for navigation, for example

    navigation.php. 
    

    Inside the file You can have only Your ul list with your navigation:

    <ul>
    <li><a href="">Menu 1</a></li>
    ....
    </ul>
    

    Then on every page (for example historia.php) in the place that You need your navigation You must include it:

    historia.php:
    
    <h2>History</h2>
    <?php include "navigation.php"; ?>
    <p>Jesteśmy na rynku już od 1969 roku...</p>
    

    There are better practices then that, but for a start to learn it is great. IN that case, You can change Your navigation only in one file, and the rest stays untouched.

    best regards