I'm using the Twenty Seventeen theme and my goal is to move the main menu (top nav) from its position under the header image to the very top of the page directly over the header image (transparent background), but there seems to be a lot of javascript in addition to css involved in positioning the menu and making it sticky when scrolling.

Can someone point me in the direction of the specific js files/functions that control and calculate the menu position on the homepage and secondary pages? It would also be useful to know the css lines that control this to check I have them all. Every time I think I've got the js and css covered the result is still buggy so I'm obviously missing something. Thanks.

  • Are you trying to edit core files? Never ever do that. Create a Twenty Seventeen child theme instead and override the Twenty Seventeen core theme from inside the child theme. – leymannx May 5 '19 at 9:01

Try adding the following

.navigation-top {
  top: 14px;

Should move the menu to the top of the screen although this will affect all pages.

@media screen and (min-width: 48em){
    .home .navigation-top {
        top: 0;
  • Code-only answers are discouraged. Where to place that snippet? Why only for certain screen sizes? – leymannx May 5 '19 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.