Support » Theme: Twenty Ten » Sticky header

  • Resolved overc


    I’m very new to this, so bear with me. I created a child theme for twenty ten. From my understanding you can edit specific parts of the site by copying and pasting the relevant code from the parent to the child?

    I want to make the header stick to the top, so you can scroll through posts but the header and menu always show. I also want to make the top margin smaller so the header is further up, allowing more of the content below to be seen.

    This is my site

Viewing 6 replies - 1 through 6 (of 6 total)
  • Set the header and menu’s CSS properties to position: fixed;, as far as making them sticky. As for making the margin smaller, remove the padding from the div with the id of header. Sorry, as I can’t answer your question about the child theme. Hope that helps! 🙂

    Thanks NoahB! position: fixed; makes made the header and menu stick, but now the post starts at the top of the page instead of underneath the header, so the first ~200 pixels of the post is hidden by the header. And for some reason the menu is now above instead of below the header.

    any idea how to fix those things?

    Hmm… Possibly add a margin of 200px to the div with the id of

  • container
  • and also add a 200px margin to the div with the id of

  • primary
  • (the sidebar). As for the dis-order of the header and menu, I don’t know as of the moment. I’ll look into it for you.

Thank you!! Changing the container margins fixed it and I got the menu back down below the header by adding margins to it.

Adding margins to primary makes the right sidebar disappear completely. I don’t really know what I’m doing so it’s possible I’m not doing it right. But I somehow made it work for the container! yay, this is fun. if only the right sidebar lined up, what do I change?

LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content

#container {
	float: left;
	margin: 180px -240px 0 0;
	width: 100%;
#content {
	margin: 0 280px 0 20px;
#secondary {
	float: right;
	overflow: hidden;
	width: 150px 220px 0 0;
#secondary {
	clear: right;
	width: 150px 0 0 0;

Got it! edited the margins for primary in the widget area. this is all so new to me. and so cool. thank you for your help!

Sure! 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Sticky header’ is closed to new replies.