[Resolved] How can I get my header to take this form?

[Erik]

Hello, I’m quite new to wordpress and I’m having problems designing the header of my website. Basically I want the header and navigation are united and under the navigation I can put a widget with html code, and everything must be centered. Like this: https://vgy.me/LsjqvL.jpg

I hope you can help me, thank you.

[Tom]

Hi there,

The easiest way to do this without creating your own widget area is to:

1. Set the Navigation to Float Right: https://docs.generatepress.com/article/navigation-location/
2. Center the Header: https://docs.generatepress.com/article/header-layout/
3. Center the Navigation: https://docs.generatepress.com/article/navigation-layout/
4. Add your widget to the Header widget area in “Appearance > Widgets”.
5. Add this CSS:

.inside-header {
    display: flex;
    flex-direction: column;
}

.site-branding,
.site-logo {
    order: 1;
    margin-bottom: 20px;
}

#site-navigation {
    order: 2;
    margin-bottom: 20px;
}

.header-widget {
    order: 3;
    max-width: 100%;
}

Depending on your browser compatibility needs, you may want to run that code through this service: https://autoprefixer.github.io/

Let me know if this helps or not 🙂

[Erik]

It worked perfectly. Thank you so much for the help!

[Tom]

You’re welcome! 🙂

[Author]

Posts