Positioning Twenty Seventeen Main Menu

All of CSS code of this post has to be inserted in Customizer Additionnal CSS tab.

Stick or unstick Twenty Seventeen main menu

On 768px and wider screens, the Twenty Seventeen menu sticks to the top of the page after the header scrolls off. This behaviour can be extended to smaller screen devices, you just have to add this CSS:

@media screen and (max-width: 767px) {
  .navigation-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }
/* add this if you display the admin menu bar on front end */
  .admin-bar .navigation-top {
    padding-top: 45px;
  }
}

If you want that the menu move off the top of the page even on large screens, just add this instead:

.site-navigation-fixed.navigation-top { position: relative; }

Set the Twenty Seventeen main menu on left / right / center

You can see on top of this page that the main menu is centered, wich is not the default behaviour. I just add this CSS:

.main-navigation > div > ul {
	text-align: center;
}

If you want to place the menu in the right corner, just replace center by right in text-align CSS property. And remove the piece of code if you want it left aligned, which is the default behaviour.