All of CSS code of this post has to be inserted in Customizer Additionnal CSS tab.
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; }
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.