Twenty Fourteen – A way to make the menu sticky on mobile?

  • Resolved dtweney

    (@dtweney)


    8 years, 4 months ago

    Hey! I found some other people on the forums with this question but no satisfactory answers yet.

    I noticed that the header or “masthead” menu on Twenty Fourteen is “sticky” on desktop web browsers, but not sticky on mobile.

    It seems like it would be a relatively easy tweak to make it sticky on mobile, and indeed I’ve done some CSS experiments that show it can be done.

    For instance, adding this to the “custom css” box makes it sticky. 

    /* Fixed Header - usually only for 783px or wider, but let's try to make it everywhere */
@media screen and (max-width: 782px) {
	.site-header {
		position: fixed;
		top: 0;
	}

}

    However, that sticky menu now covers up the header image.

    Is there an elegant way to do this that doesn’t cover up the header, or am I just dense?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 4 months ago

    Give the body a padding-top style and put it within that media query

    Thread Starter dtweney

    (@dtweney)

    8 years, 4 months ago

    Yeah! That works pretty well.

    I added one more tweak to close up the gap between the header image and the top of the content. I think this does the trick:

    @media screen and (max-width: 782px) {
	.site-header {
		position: fixed;
		top: 0;
	}

	body {
		padding-top: 48px;
	}

	.content-area {
		padding-top: 12px;
	}
}

    Thread Starter dtweney

    (@dtweney)

    8 years, 4 months ago

    And thank you for your help, Andrew!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Fourteen – A way to make the menu sticky on mobile?’ is closed to new replies.