Archived topic
Header
5 replies · Started by ameena on April 23, 2020
Hello,
First of all thank you for this great theme and sorry for my English!
I'm trying to make a header like this one but I can't do it. I tried hooks and widgets but there's always something wrong.
Is it possible?
Thank you in advance for your help!
I'm attaching a capture of what I'd like to do to make it clearer.
https://imgur.com/a/tN8Q0Hf
Hi there,
I wonder if a simple Header widget would do the trick? Have you tried adding a navigation widget and search widget in the "Header" widget area?
It might require some CSS, but it's probably your best bet.
Let me know :)
Thank you for your response.
Indeed with widgets and a little css it's possible ;)
I still have a question, how to make sure that the widget in the header does not "move" the logo?
Thanks
I'm coming back because I think I did what I wanted to do. I don't know if it's perfect and optimized but here's the code for what it could help!
@media screen and (min-width: 768px) {
.inside-header {
padding: 0px !important;
margin-bottom: 30px !important;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.header-widget {
max-width: 500px;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.site-logo{
position: absolute;
left: 50%;
margin-left: -110px;
z-index: 99
}
.header-image {
margin: -18px auto 25px 0;
}
.top-bar{
margin-bottom:30px;
}
}Looks great! That's likely how I would have done it :)
