Twenty Thirteen make header fixed

  • I am trying to make my header in TwentyThirteen to be fixed. That way I will be able to see the header all the time, and the text will just scroll beneath it. I am just making a simple blog site that is aggregated from another blog.

    When I try to change the CSS in the stylesheet from:
    .site-header {
    position: relative;
    }

    … and change it to:
    .site-header {
    position: fixed;
    }

    The header gets very small and way over to the left! Not at all what I expected. Can anyone help?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Tabays777

    (@tabays777)

    I think I am getting closer. I changed it to read:
    .site-header {
    position: fixed;
    width: 100%;
    }

    This does make the fixed header stretch across the top again. The only problem now is that the text is scrolling over the top of the header. Really weird!! I have to find some way to both move the text below the header. In progress on my guessing until someone helps me out! He, he, he.

    What’s happening is that setting position: fixed on an element removes that element from the document flow, meaning that the browser no longer accounts for the space taken up by that element when determining how to layout the page. So that’s why you get the text scrolling over the header. For this layout to work you generally need to “fake it” by setting z-index on the header and giving the content area some top padding to push it all beneath the header. So try something like this:

    #masthead {
    position: fixed;
    width: 100%;
    z-index: 10;
}

.site-main {
	position: relative;
	padding-top: 400px;
}

    As a side note, you should not be editing theme files directly, as you will lose all these changes if the theme ever gets updated, to add new features or fix bugs or patch security issues. Any changes should be made in a child theme or using a custom CSS plugin.

    Thank you, stephencottontail! With that simple explanation, now I understand how to make any fixed element. Your answer was very helpful

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Thirteen make header fixed’ is closed to new replies.