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

Check my answer. I just verified it. – m4n0 May 21 '15 at 17:31 — m4n0, May 21 '15 at 17:31

m4n0 · Accepted Answer · 2015-05-21T18:00:54.473

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 Output

edited May 21 '15 at 18:00

answered May 21 '15 at 17:26

m4n0

29,823
27
76
89

How can I do that? I dont know any php. If I add this to the style.css file nothing happens. – youngy May 21 '15 at 17:38
Go to style.css, search for this code and edit only the relative text to fixed. Best way to do this is using Child themes since you are using WordPress. – m4n0 May 21 '15 at 17:39
It is in site-banner.css `http://tyler.com/wp-content/themes/TESSERACT-Merge-Test/css/site-banner.css` – m4n0 May 21 '15 at 17:42
thank you so much... it's working. one last issue: the backgroundbar ontop got smaller now. which class should I edit to get it back to the original size? – youngy May 21 '15 at 17:57

score 0 · Answer 2 · answered May 21 '15 at 17:26

0

You could try:

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

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

answered May 21 '15 at 17:26

NendoTaka

1,224
8
14

which class in this case? site-navigation? or should i add it to all the classes included in the "top area" – youngy May 21 '15 at 17:30
The position and top just need to be added to whatever class is controlling your menu. – NendoTaka May 21 '15 at 17:31

score 0 · Answer 3 · edited May 21 '15 at 18:25

0

remove position: relative;

add

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

enter image description here

edited May 21 '15 at 18:25

Mark

6,762
1
33
50

answered May 21 '15 at 17:26

Dmitriy

4,475
3
29
37

score 0 · Answer 4 · answered May 21 '15 at 17:29

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;
}

Sorry Rick, this is not he wanted. – m4n0 May 21 '15 at 17:30 — m4n0, May 21 '15 at 17:30

make header menu a fixed position(theme tesseract)

4 Answers4

Linked