CODEWITHSUNDEEP
htmlcssnavigation
Emo-Punk
Emo-Punk

Reputation: 139

Navigation Bar to Stay on top

I created a nice navigation bar and I want to stay on the top of the page even if the user is scrolling. I've created a separate PHP file for the header named header.php and included it on the main page.

CSS for headermenu

.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}

It worked good though but it won't stay on the top when the user scrolls, so I decided to put some additional codes:

.headerMenu {
background-image: url(../img/background_white.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;

position: fixed;
top: 0;
}

After putting those two codes my navigation bar won't display on the page.
I tried asking some people on the net and they all come up with the position:fixed; top:0; code. Why it's not working?

HTML

<div class = "headerMenu">
    <div id = "menu">
     <a href = "home.php" />What's New</a>
     <a href = "home.php" /><?php echo $firstname; ?></a>                           
     <a href = "signout_com.php" />Sign Out</a>                                             
    </div>
</div>

Upvotes: 0

Views: 2732

Answers (2)

K K
K K

Reputation: 18109

Nothing wrong in css but in html:

Demo : http://jsfiddle.net/lotusgodkk/xpgzP/99/

HTML:

<div class="headerMenu">
        <div id="menu"> <a href="home.php">What's New</a>
     <a href="home.php">Name</a>  <a href="signout_com.php">Sign Out</a> <!--Incorrect closing tags removed-->
        </div>
    </div>
    <div id="content">content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>content
        <br/>
    </div>
    <div id="footer"></div>

Upvotes: 0

KM123
KM123

Reputation: 1387

Try this :)

.headerMenu {
    position:fixed;
    top:0;
    width:100%;
    background-color:#FF0000;
    background-image:url(../img/background_white.png);
    height:56px;
}

Remove the padding, then remove the self closing tag for your anchors :)

Also make sure you are putting content underneath it :) and then add 56px margin to the top of the content element.

I hope this helps

Upvotes: 1

Related Questions