Top Menu below Header Image

Hi @carolineellison. Would the screenshot below illustrate what you aim to accomplish?

I think we may be able to do this with some custom CSS, have you ever added custom CSS before? We can use the code below:

/* Place header image above menu */
header {
 display: flex;
 flex-direction: row;
 flex-flow: row wrap;
}
.site-header-main { 
  order: 2; 
}
.header-image { 
  order: 1; 
}

Please add this code in your “Additional CSS” tab (at My Site > Appearance > Customize), in a new line, under any existing code, and make sure you click on “Save Changes” to save it.

Let me know if that works!

Hi

Thank you, this does work a treat. Is there some code I can add to make the spacing between the header and the menu to be less. I would like to close the gaps if possible.

Thank you.

Hi @carolineellison. You could add the following CSS code to reduce this gap:

/* Remove bottom margin in header image */
.header-image {
  margin-bottom:0;
}

Let me know if that helps!