make header menu a fixed position(theme tesseract)

Question

I am trying to make the header menu ontop of the tesseract theme ( http://tyler.com/ ) a fixed position , so that if you scroll down one can access all menu elements from any postion on the site.

I have tried a few things and always added position:fixed; to a few css classes of the theme, but nothing happened.

I would be glad, if you could help me out with this issue. Thanks in advance

Answer 1

Edit this code from position: relative to position: fixed

.home .site-header.no-header-image {
  left: auto;
  position: fixed;
  top: auto;
}

Now to avoid the top content getting hidden:

.home .site-content {
  padding-top: 60px;
}

Output

Answer 2

You could try:

.<youClassName>{
    position: absolute;
    top: 0px;
}

This should fix your menu to the top and it will follow you on scrolling.

Answer 3

remove position: relative;

add

.home .site-header.no-header-image {
  position: fixed;
}

Answer 4

Add position fixed to a div not in every element

check this fiddle

HTML

<div id = "menu">
    <ul class = "main">
        <li>
            Home
        </li>
        <li>
            About
        </li>
        <li>
            Contact
        </li>
    </ul>
</div>
<div id = "content">

    CONTENT CONTENT
</div>

CSS

div#menu {
    position: fixed;
    background-color: #0088cc;
    color: #f8f8f8;
    width: 100%;
    height: 50px;
}

ul li {
    float: left;
    margin: 2%;
    list-style: none;
    cursor: pointer;
}

#content {
    height: 1000px;
}