Top Menu below Header Image

Viewing 3 replies - 1 through 3 (of 3 total)
  • Alvaro Gómez

    (@mrfoxtalbot)

    3 years, 1 month ago

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

    Screen Shot on 2023 02 20 at 12 27 05

    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!

    Thread Starter carolineellison

    (@carolineellison)

    3 years, 1 month ago

    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.

    Alvaro Gómez

    (@mrfoxtalbot)

    3 years, 1 month ago

    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!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Top Menu below Header Image’ is closed to new replies.