Archived topic
How can I get my header to take this form?
3 replies · Started by Erik on January 28, 2019
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.
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 :)
It worked perfectly. Thank you so much for the help!
You're welcome! :)
