Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

fixed and absolutely positioned overlay

I have a sticky header, with a navigation in it. The navigation is responsive and when it reaches a small enough break point the nav li's disappear and a menu button appears. On clicking the button the navigation appears as a dropdown menu.

At the moment the dropdown is correctly positioned in relation to the button, when the button is clicked. The menu button is sticky and so doesn't move, but the dropdown menu scrolls with the rest of the page. I want it to be sticky like the menu button. I'm using jQuery to make the navigation bar, sticky. The relevant div for that is 'menu'. I think this is a CSS problem though. Any help would be greatly appreciated.

Here's my code:

<div class="menu">
        <nav id="nav-main">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="publicationsSubjects.html">Publications</a></li>
                <li><a href="peoplePage.html">People</a></li>
                <li><a href="imageSubjectsPage.html">Images</a></li>
                <li><a href="aboutPage.html">Maps</a></li>
                <li><a href="aboutPage.html">Projects</a></li>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="aboutPage.html">Video</a></li>
                <li>
                    <form class='searchBar'>
                        <input class='search' type='text' placeholder='Search...' 'required'>
                        <input class='button' type='button' value='Search'>
                    </form>
                </li>
            </ul>
        </nav>
        <div id="nav-trigger">
            <span>Menu</span>
        </div>
        <nav id="nav-mobile"></nav> 
    </div>

nav {
  margin-bottom: 30px; 
  font: normal 1em/1.5 'Born', sans-serif;
}

nav#nav-main {
    background: #669966;
    padding: 10px 0; 
}

nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; 
}

nav#nav-main li {
    display: inline-block;
    padding: 0 5px; 
}

nav#nav-main a {
    display: block;
    color: white;
    padding: 6px 18px; 
    text-decoration: none;
}

nav#nav-main a:hover {
      background-color: #fff;
      color: #000; 
}

#nav-trigger {
  display: none;
  text-align: center;
  z-index: 500; 
}

#nav-trigger span {
    display: inline-block;
    padding: 6px 11px;
    background-color: #559977;
    color: white;
    cursor: pointer;
    text-transform: uppercase; 
}

#nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #fff;
      border-right: solid 10px transparent; 
}

#nav-trigger span:hover {
      background-color: #338899; 

}

#nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; 
}



nav#nav-mobile {
  position: relative;
  display: none;
  z-index: 500; 
}

nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #559977;
}

nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #557799; 
}

nav#nav-mobile li:last-child {
      border-bottom: none; 
}

nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px;
    text-decoration: none; 
}

nav#nav-mobile a:hover {
      background-color: #fff; 
      color: #000; 
}

1 Answer

Justin Henderson
Justin Henderson
13,739 Points
Justin Henderson
Justin Henderson
13,739 Points

Hey Gabriel, I'm not sure if I'm following your original question correctly. Are the li elements disappearing once the browser window is adjusted to a certain size?