Move header image above menu

I want to know this as well!

There are 2 chunks of code, one for the menu and one for the header image enclosed in “<?php” and “?>” tags, just switch them.

you may have to make updates to the CSS after doing this.

please do this in a child theme, leave the code in the theme twentysixteen alone. copy header.php into your child theme and modify it.

Al

If you have a child theme, you can add this to the end of your child theme’s style.css file. Otherwise, you can use a CSS plugin like Jetpack or Custom CSS Manager.

/* Flexbox container */
#masthead {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
   -webkit-box-orient: vertical;
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
}
.header-image {
   -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
   -ms-flex-order: 1;              /* TWEENER - IE 10 */
   -webkit-order: 1;               /* NEW - Chrome */
   order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.site-header-main {
   -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
   -ms-flex-order: 2;              /* TWEENER - IE 10 */
   -webkit-order: 2;               /* NEW - Chrome */
   order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}