0

I am trying to get my horizontal navigation bar to stick to the top of my screen. The problem is that if I set top to 0, the menu sticks to the top but the initial menu item gets overshadowed when you hover over it. When you take top out, the hover effect resumes to normal but the menu is no longer set to the top edge. What I have tried is messing with position as well as the hover options.

.nav ul {
    list-style: block;
    background-color: black;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    font-size: 110%;
}
.nav > ul > li {
    text-align: center;
}
.nav li {
    text-align: center;
}
.nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
}
.nav a:hover {
    background-color: #005f5f;
}
.nav a.active {
    background-color: #aaa;
    color: #444;
    cursor: default;
}
.nav li li {
    font-size: .6em;
}
.nav li ul {
    display: none;
    position: absolute;
    width: inherit;
}
.nav li:hover ul {
    display: block;
}
.nav li ul li {
    display: block;
}
}
.nav > ul > li > a {
    padding-left: 0;
}

demo: https://jsfiddle.net/dkgj8s7r/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
munchschair
  • 1,593
  • 3
  • 19
  • 43

1 Answers1

1

The .nav and ul elements are already aligned to the top of the screen. The problem is the block of php-generated code in the last list item creating a height that pushes the links down to the bottom.

I'm not sure what you want to do with that code, but you may want to put it somewhere else.

If you remove the PHP list item the horizontal menu bar seems to work fine.

<li>
    <?php

    session_start();


    if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
    {
    // echo "<div id='nobrk'>" . $_SESSION['username'] . " is logged in
      <a href='logout.php'>Log out</a><div>";
    echo "<a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a>";
    echo "<ul><li><a href='logout.php'> Log out</a></li><ul>";

    }
    else
    {
        echo "<a href='login.php'> Log in</a></li>";

    }

    // echo $_SESSION['loginstatus'] . $_SESSION['username'];

    //the alternative is to simply change the name of the index.
    //the problem is if it isnt created at all, it'll still give me an error

?></li>

DEMO: https://jsfiddle.net/dkgj8s7r/1/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • When I comment the php code out, the effect remains for me. – munchschair Oct 28 '15 at 04:18
  • Sure, if you take a look at this websites horizontal bar, you'll see that there is no room for any background or anything else. A lot of websites do this because the edge offers infinute space (or at least if it is full screened). But if you take a look at my bar here, you'll see some of the background takes up the edge: http://s15.postimg.org/osacp4opm/space.jpg – munchschair Oct 28 '15 at 04:52
  • Just apply `margin: 0` to `body`. – Michael Benjamin Oct 28 '15 at 05:01
  • It worked. But this means body doesn't default to 0? – munchschair Oct 28 '15 at 05:24
  • 1
    Browsers have default styles defined by the *user agent stylesheet*. Consider [**normalize.css**](https://necolas.github.io/normalize.css/) for some help with browser defaults, and see this [**related post**](http://stackoverflow.com/q/13127887/3597276). – Michael Benjamin Oct 28 '15 at 17:17
  • I got normalize referred to now. Do you know why php will weigh down my menu and how to avoid it? – munchschair Oct 29 '15 at 00:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93633/discussion-between-munchschair-and-michael-b). – munchschair Oct 29 '15 at 00:49