Archived topic
How to move text widget below the Search bar widget in the Header?
10 replies · Started by bluebit on March 4, 2022
I have currently two widgets in the header widget area, a search bar widget and a text widget. I would like to move the text widget below the search bar in the header, how do I do this with css?
My current Custom CSS code:
.inside-header {
position: relative;
}
.header-widget {
position: absolute;
bottom: 37px;
left: 15%;
}
.site-header input[type="search"] {
box-sizing: content-box;
width: 710px;
}
.header-widget .widget {
display: inline-block;
vertical-align: top;
}
Hi there,
I think the easiest option should be to add a search and paragraph block with a block element hook:
https://wordpress.org/support/article/search-block/
https://docs.generatepress.com/article/block-element-hook/
The after_header hook should work.
Let me know :)
I feel more comfortable with using Wordpress without blocks, what´s the css code to move the second header widget below the first?
The current structure is just incorrect and difficult to configure - header widgets designed to be on the right of the logo/menu and not below.
You can also use a hook element with and call the search field using this:
<?php get_search_form(); ?>
Alright, check out my site now, I managed to hook a text widget below the header, now the sides of the widget need to be contained, how to do this?
Hmm since you are using a page builder, I'd assume it has an option that lets you set the width?
Yea, page builder lets you use add CSS classes, but I don´t know how to use it. Also I tried to make it fit see site again but when its responsive the sides dont stick to the header or body, is there a way to say max width 1200px?
I found in a section where i can put in CSS declarations and I put:
max-width: 1200px
now I have to center it.
So is it all working now?
I cannot provide support for page builders as I've never used them before.
yep, i found another way to get it to work :)
Glad to hear :)
